/* Shared design tokens for the landing prototype. direction-a.css (hero) and
   everything below the hero (tour.css, finale.css and the chapters' own
   sheets) consume this set, which is what keeps them in lockstep. */

:root {
  /* ---- the editorial frame ----
     One column runs the whole document: the hero, the chapters, the closing band
     and the footer all sit inside the same width, and frame.css draws its two
     edges as a fixed overlay. Every horizontal rule on the page is a
     `border-top`/`border-bottom` on something this wide, so they all land
     exactly between those two verticals.

     78rem, not the 88rem this ran at until 2026-08-19: at a 1920 viewport the
     old cap left the column 1408px wide with ~250px of air either side, which
     reads as a page pushed against the screen rather than set on it. 1248px
     puts a third of the width into margin at 1920 and still holds the hero's
     two-line headline on one line each at 1440. */
  --frame-gutter: clamp(2rem, 3.4vw, 3.25rem);
  --frame-max: 78rem;
  --frame-width: min(100% - var(--frame-gutter) * 2, var(--frame-max));
  --frame-line: rgb(255 255 255 / 12%);
  /* Padding inside a framed cell — content has to hold itself off the rules. */
  --frame-pad: clamp(1.1rem, 1.5vw, 1.5rem);

  /* Signal colour: white. The page runs a single achromatic light language —
     the type and the chrome are grey-white — so the one thing allowed to shout
     does it with brightness, not hue. The gold light behind the hero window
     and the paintings under the chapters are the exceptions, and the only warm
     surfaces on the page by design. */
  --accent: #ffffff;
  --accent-rgb: 255 255 255;

  /* ---- the plates ----
     Public-domain oil sketches that sit behind a window. They were ONE
     painting until 2026-08-19, varied only by crop, which read exactly as what
     it was: the same picture six times.

     All of them are light and quiet, and none has a subject that competes with
     the product standing on it. The hero stopped using one on 2026-10-12 (its
     window stands on a light of its own now), and Caspar David Friedrich's
     Morning Mist in the Mountains (mist.webp) left with it.

     · plateau    Frederic Edwin Church, mountain plateau with hut (Ecuador)
     · cloudstudy John Constable, Cloud Study (1822)
     · clouds     Frederic Edwin Church, Clouds, Hudson Valley (1866)
     · valley     Frederic Edwin Church, deep valley with sunset-lit clouds
     · jamaica    Frederic Edwin Church, sky at sunset, Jamaica

     Plates are encoded at 1200px and 30–60 kB each. */
  --plate-plateau: url("/shots/deck/assets/plates/plateau.webp");
  --plate-cloudstudy: url("/shots/deck/assets/plates/cloudstudy.webp");
  --plate-clouds: url("/shots/deck/assets/plates/clouds.webp");
  --plate-valley: url("/shots/deck/assets/plates/valley.webp");
  --plate-jamaica: url("/shots/deck/assets/plates/jamaica.webp");

  /* Font language — one system sans for text + chrome, mono for terminal. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* ---- app-window chrome: deck-dark ----
     Shared by .a-appwin in the hero and the marketing video. Until 2026-08-20
     this block was Tokyo Night held at 60% of its original saturation; it is
     now the app's own resolved token set for `deck-dark`, the theme a new
     install actually opens in (src/settings/themes.ts, src/lib/derive-colors.ts).
     Nothing here is re-tinted — a value that disagrees with the app is a bug in
     this file.

     Two facts about deck-dark decide the plane order, and both are visible
     above:

     · The rail colour is a PINNED LITERAL. `#272d31` is keyed on the background
       string inside derive-colors.ts and is NOT reachable by mixing #17181c
       toward white (the hue moves 228deg to 204deg), so --sg-rail is written
       here as a literal for the same reason.
     · On a dark theme the chrome ladder is measured from that rail rather than
       from the background. So the STAGE IS THE DEEPEST SURFACE in the window
       and every chrome plane rises off it — stage #17181c, then the rail and
       frame row at #272d31, then chrome 1 and 2, then the active row/chip at
       #3d4246. This inverts the old mock, where the sidebar was the darker
       plane and the stage floated above it.

     The window's one structural shell line is therefore VERTICAL: the seam
     between the rail and the stage. Hence one seam-column token and no set of
     horizontal ones.

     Two carried-over notes:

     · --sg-hairline-soft stays an ALPHA. It is the landing's own soft edge
       (consumers in appwin.css and video.css, the status bar's top border
       among them); only its hue changes. Turning it
       into the app's near-background solid seam would erase those edges.
     · The dim and faint inks are opaque hex now, not alphas over the stage,
       because that is what the app's --text-muted / --text-faint are. Opaque
       ink stops picking up the plane under it, so anywhere those two are
       painted over a wash the pixels shift slightly. No rule changes.

     SHARED WITH THE MARKETING VIDEO. marketing/video/src/main.js imports this
     file, and video.css resolves these tokens 23 times, so a value edited here
     re-colours the whole video the next time anyone renders it — which means
     the rendered assets in marketing/video/out/ are stale in colour until then.
     Accepted on purpose: forking this block into a video-local :root would
     guarantee the two surfaces drift apart permanently, which is the opposite
     of why they share it. */

  /* Planes, deepest first. */
  --sg-bg: #17181c; /* --bg — the stage */
  --sg-seam-recessed: #1c1d21; /* mix(bg, #fff, .02) — the one seam still off the stage */
  --sg-seam-column: #1f2327; /* --sidebar-seam — the structural rail/stage line */
  --sg-rail: #272d31; /* --sidebar-bg — rail + frame row */
  --sg-chrome-1: #2d3337; /* mix(rail, #fff, .03) */
  --sg-chrome-2: #343a3d; /* mix(rail, #fff, .06) */
  --sg-seam-raised: #3a4044; /* mix(rail, #fff, .09) — the picker panel border */
  --sg-raised: #3d4246; /* --tab-active-bg = mix(rail, #fff, .10) */
  --sg-tab-rest: rgba(
    255,
    255,
    255,
    0.03
  ); /* --tab-rest-bg; over the stage it flattens to #1e1f23 */

  /* Ink. */
  --sg-fg: #e7e7e7; /* --text-primary (= the preset foreground) */
  --sg-fg-dim: #c7c7c8; /* --text-muted */
  --sg-fg-faint: #adaeaf; /* --text-faint */

  /* Signal. */
  --sg-accent: #6f9cff; /* --accent, the theme blue */
  --sg-green: #8ccf7e;
  --sg-yellow: #e5c07b; /* --status-unread — the `asked` dot */
  --sg-purple: #c792ea; /* the theme magenta */
  --sg-cyan: #63c5da; /* the theme cyan — a worktree colour only */
  --sg-red: #ef6b73; /* --red — the `failed` dot */
  --sg-quiet-dot: rgba(
    255,
    255,
    255,
    0.45
  ); /* the done/idle dot; over the rail it flattens to #888c8e */

  /* Lines. */
  --sg-hairline: rgba(
    255,
    255,
    255,
    0.12
  ); /* --hair / --seam-divider — pane splits, strip bottom, window border */
  --sg-hair-strong: rgba(
    255,
    255,
    255,
    0.2
  ); /* --hair-strong — the multi-pane inset frame, the active chip */
  --sg-hairline-soft: rgba(255, 255, 255, 0.08); /* landing-only soft edge; see above */
}

@media (max-width: 70rem) {
  :root {
    --frame-gutter: 1.75rem;
  }
}

@media (max-width: 47.5rem) {
  :root {
    --frame-gutter: 1rem;
    --frame-pad: 0.95rem;
  }
}