/*
 * The pure token layer: only `:root` custom properties (fonts, type scale,
 * spacing, control heights, palette). Also imported by the design guide. Raw
 * font sizes and control heights belong only here (scripts/lint-styles.mjs).
 */
:root {
  /* Font stacks; both faces self-hosted (@font-face in 01-tokens-auth.css). */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;

  /* Type and spacing in rem: they follow the reader's text-size setting (at
     the default 16px, 1rem = 16px, so 0.84375rem is the old 13.5px). Lines
     and geometry (radii, tiles, panels) stay in px. */
  /* One type scale, six steps; a mono uppercase label is an eyebrow even at 12px. */
  --fs-eyebrow: 0.6875rem; /* mono uppercase labels, eyebrows */
  --fs-caption: 0.75rem; /* meta, timestamps, hints */
  --fs-body: 0.84375rem; /* reading default */
  /* A text field on a touch screen: never under 16px, where iOS zooms the page
     on focus and stays zoomed after you leave. rem follows the person's iOS
     text size (`-apple-system-body`), which can set 1rem below 16px. */
  --fs-field-touch: max(16px, 1rem);
  --fs-title: 1rem; /* item / panel titles */
  --fs-heading: 1.375rem; /* section heads */
  --fs-display: 1.875rem; /* the rare big moment */

  /* One spacing ramp. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Two control heights: 34px default/topbar, 28px compact viewer toolbars.
     Border-box, so this is the visual height. `--topbar-control-h` is an alias. */
  --control-h: 2.125rem;
  --control-h-sm: 1.75rem;
  /* The smallest pointer target for a control drawn smaller (the To-Do check). */
  --hit-target: 2rem;
  /* The smallest thing a finger is asked to hit (WCAG 2.5.5, platform guides). */
  --hit-target-touch: max(44px, 2.75rem);
  /* A phone's viewer bar along the bottom, measured by pages/toolbar.ts once
     shown (it may wrap); this is one row, its first-paint guess. */
  --phone-bar-h: calc(var(--hit-target-touch) + 2 * var(--sp-1) + 1px + env(safe-area-inset-bottom, 0px));
  /* A viewer's panel as a sheet on that bar: room for the page above it. */
  --phone-sheet-h: min(40dvh, 21rem);
  /* The Pages sheet: its head over one row of thumbnails. */
  --phone-strip-h: 12.5rem;
  /* The smallest a pointer target may be anywhere (WCAG 2.5.8). */
  --hit-target-min: max(24px, 1.5rem);
  --topbar-control-h: var(--control-h);

  /* The layers panel's opacity fill-bar track height. */
  --layer-bar-h: 6px;

  /* Breakpoints, by the room there is, not the device (media queries can't
     read variables, so they are written out): phone below 700px, tablet
     700–1099px, desktop from 1100px. New rules use only these edges:
     (max-width: 699px), (min-width: 700px), (max-width: 1099px),
     (min-width: 1100px). The older narrow-screen rules (480, 620, 640, 860px)
     are replaced by the phone layout. */

  /* The stacking scale, lowest first. Every z-index is one of these. */
  --z-raised: 1; /* above a stretched link inside the same card (a card's ⋯) */
  --z-cover: 2; /* a destination's page over the gallery (To-Do, admin, account) */
  --z-lifted: 2; /* a row being dragged, over its neighbours */
  --z-menu: 10; /* an in-place menu over its row */
  --z-dropzone: 40; /* the upload drop target over the page */
  --z-toast: 50; /* the shell's toast */
  --z-panel: 55; /* floating panels: transfers, the bin's preview */
  --z-toast-top: 60; /* the bin's undo toast, over its preview */
  --z-scrim: 70; /* a phone's drawer dims the app beneath it */
  --z-drawer: 80; /* the places drawer on a phone */
  /* Above all app chrome, for the portaled popover menus and the skip link. */
  --z-popover: 100;

  --radius: 2px; /* the app's corner, everywhere */
  --radius-card: 8px; /* raised cards and overlays: side panels, dropdowns, toast */

  /* Docked side panel widths: OCR (default), layers (wide), page index (narrow,
     left). JS reads these via getComputedStyle for relayout. */
  --panel-w: 268px;
  --panel-w-wide: 320px;
  --panel-w-narrow: 180px;
  --panel-gap: 22px;

  /* Row rhythm shared by the list view and the bin. */
  --row-pad-y: 0.9375rem;
  --row-pad-y-tight: 0.4375rem;

  /* Preview size classes; each fixes the axis its layout holds constant (rows
     fix height, masonry columns fix width). `--tile-w-icon` must equal
     `TILE_W` in render/types.ts. */
  --tile-w-icon: 184px;
  --preview-h-list: 85px;
  --preview-h-panel: 101px;
  --preview-h-filmstrip: 124px;

  /* The "transparent" checker under content that can be hidden (`.spd`
     reference layer, PDF document layer). Theme-independent on purpose: it sits
     under authored content that never inverts. */
  --checker-base: #f4f4f4;
  --checker-square: #d8d8d8;
  --checker-cell: 22px;
  --checker-offset: 11px;
  --checker-image:
    linear-gradient(45deg, var(--checker-square) 25%, transparent 25%, transparent 75%, var(--checker-square) 75%),
    linear-gradient(45deg, var(--checker-square) 25%, transparent 25%, transparent 75%, var(--checker-square) 75%);
}

/* Light: ink on paper, on a warm desk. */
:root,
:root[data-theme="light"] {
  --desk: #e9e6dc;
  --sheet: #fcfbf7;
  --ink: #1c1b17;
  /* Both at least 4.5:1 on every surface they sit on (sheet, desk, the
     reader's bar, the bin's note), with a visible step between them. */
  --ink-soft: #4f4c43;
  --ink-faint: #666253;
  --line: #cbc6b6; /* the underline affordance under fields, hairline borders */
  --rule: rgba(28, 27, 23, 0.05); /* the sheet's faint horizontal rules */
  /* The list separator, between `--rule` (1.10:1) and `--line` (1.65:1) at 1.33:1. */
  --row-rule: rgba(28, 27, 23, 0.14);
  /* Red is reserved for the margin line and errors; brand/state use --accent. */
  --margin: #bf5248;
  /* --margin darkened for text (4.5:1). */
  --margin-ink: #ab4239;
  --accent: #3f6b4a; /* green ink — brand, selection, focus, search highlight */
  --shadow: rgba(36, 32, 22, 0.18);
  /* Theme-independent lifts: a sheet of paper (the .spd canvas) and a hairline
     (the layers panel's swatch); black at low alpha reads on both themes. */
  --shadow-paper: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-hairline: 0 1px 2px rgba(0, 0, 0, 0.08);
  --hover: rgba(28, 27, 23, 0.05);
  --paper-ink: #33302a; /* handwriting rendered onto a note page */
  --paper-rule: rgba(28, 27, 23, 0.11);

  /* Opaque hover fills, so a control never shows the desk through a tint. */
  --hover-fill: color-mix(in srgb, var(--sheet), var(--ink) 7%);
  --hover-fill-ink: color-mix(in srgb, var(--ink) 90%, var(--accent));
}

/* Dark: inverted e-ink. The media query applies unless light is pinned; again
 * when `data-theme="dark"` is forced. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #0c0c0e;
    --sheet: #17171a;
    --ink: #e9e6dd;
    --ink-soft: #a7a396;
    --ink-faint: #838073; /* 4.5:1 on the darkest surface */
    --line: rgba(233, 230, 221, 0.18);
    --rule: rgba(233, 230, 221, 0.055);
    --row-rule: rgba(233, 230, 221, 0.15);
    --margin: #cd6a60;
    --margin-ink: #cd6a60;
    --accent: #7fae86;
    --shadow: rgba(0, 0, 0, 0.55);
    --hover: rgba(233, 230, 221, 0.06);
    --paper-ink: #cfccc2;
    --paper-rule: rgba(233, 230, 221, 0.12);
    --hover-fill: color-mix(in srgb, var(--sheet), var(--ink) 7%);
    --hover-fill-ink: color-mix(in srgb, var(--ink) 90%, var(--accent));
  }
}

/* A pinned choice also narrows `color-scheme` so native UI matches. */

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --desk: #0c0c0e;
  --sheet: #17171a;
  --ink: #e9e6dd;
  --ink-soft: #a7a396;
  --ink-faint: #838073;
  --line: rgba(233, 230, 221, 0.18);
  --rule: rgba(233, 230, 221, 0.055);
  --row-rule: rgba(233, 230, 221, 0.15);
  --margin: #cd6a60;
  --margin-ink: #cd6a60;
  --accent: #7fae86;
  --shadow: rgba(0, 0, 0, 0.55);
  --hover: rgba(233, 230, 221, 0.06);
  --paper-ink: #cfccc2;
  --paper-rule: rgba(233, 230, 221, 0.12);
  --hover-fill: color-mix(in srgb, var(--sheet), var(--ink) 7%);
  --hover-fill-ink: color-mix(in srgb, var(--ink) 90%, var(--accent));
}

/* On a touch screen every control is a finger's size (44 px, WCAG 2.5.5 and
   the platforms' guides); with a mouse they keep their desktop size. */
@media (pointer: coarse) {
  :root {
    --control-h: var(--hit-target-touch);
    --control-h-sm: var(--hit-target-touch);
    --hit-target: var(--hit-target-touch);
    --hit-target-min: var(--hit-target-touch);
  }
}