/* Every value in the design system. Nothing outside this file invents one.
 *
 * Theme is an attribute on <html>, stamped by shell/theme.js before first paint:
 *   data-theme      = "dark" | "light"   (what this file reads)
 *   data-theme-pref = "dark" | "light" | "auto"
 * "auto" is resolved in JS on purpose — a @media block cannot be shared across
 * both selectors, so the palette would be written twice and drift.
 */

:root {
  /* ── type ───────────────────────────────────────────────────────────── */
  /* Bundled in app/assets/fonts. The fallbacks matter: they are what shows
   * while the woff2 loads, and what shows if a file ever goes missing. */
  --font-ui: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* display steps */
  --fs-d1: 56px;  --lh-d1: 1;
  --fs-d2: 40px;  --lh-d2: 1;
  --fs-d3: 28px;  --lh-d3: 1.15;
  /* text steps (Apple HIG macOS scale — 76% of v4's sizes already sat here) */
  --fs-1: 22px;   --lh-1: 26px;
  --fs-2: 17px;   --lh-2: 22px;
  --fs-3: 15px;   --lh-3: 20px;
  --fs-4: 13px;   --lh-4: 16px;
  --fs-5: 12px;   --lh-5: 15px;
  --fs-6: 11px;   --lh-6: 14px;
  --fs-7: 10px;   --lh-7: 13px;
  --fs-8: 9px;    --lh-8: 12px;   /* v4 used 9px 26 times without naming it */

  --lh-tight: 1;  --lh-snug: 1.35;  --lh-loose: 1.5;

  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* ── spacing (2px base; covers 82% of v4's real values) ─────────────── */
  --sp-0: 0;     --sp-1: 2px;   --sp-2: 4px;   --sp-3: 6px;
  --sp-4: 8px;   --sp-5: 10px;  --sp-6: 12px;  --sp-7: 16px;
  --sp-8: 20px;  --sp-9: 24px;  --sp-10: 32px; --sp-11: 40px;

  /* ── radius (v4 shipped 19 distinct values) ─────────────────────────── */
  --r-1: 2px;  --r-2: 4px;  --r-3: 6px;  --r-4: 8px;  --r-5: 12px;
  --r-pill: 9999px;

  /* ── controls (v4 shipped 11 distinct heights) ──────────────────────── */
  --ctl-h-sm: 22px;  --ctl-h-md: 24px;  --ctl-h-lg: 28px;  --ctl-h-xl: 32px;
  --ctl-h-icon: 18px;  --ctl-h-icon-sm: 16px;
  --ctl-pad-x-sm: 8px;  --ctl-pad-x-md: 8px;
  --ctl-pad-x-lg: 10px; --ctl-pad-x-xl: 12px;
  --ctl-r: var(--r-3);
  --ctl-gap: var(--sp-3);

  /* ── borders & states ───────────────────────────────────────────────── */
  --bw: 1px;
  --disabled-opacity: 0.45;

  /* ── motion ─────────────────────────────────────────────────────────── */
  --dur-1: 120ms;  --dur-2: 180ms;  --dur-3: 260ms;
  --ease-standard: cubic-bezier(.22, .61, .36, 1);

  /* ── adaptive density (v4 had 8 different minmax floors) ────────────── */
  --cell-thumb: 72px;  --cell-card: 144px;  --cell-panel: 240px;
  --cell-icon: 48px;   /* captionless tiles: the picture is the whole cell */

  /* ── layout ─────────────────────────────────────────────────────────── */
  --menubar-h: 34px;

  /* One gutter. Every edge in the app lands on it: the space between the three
     regions, between two panels stacked in a column, and between a band's
     content and the window. Three different numbers for those three things is
     what makes a layout read as accidental. */
  --gutter: var(--sp-5);

  /* Settings rows put their control in a column of this width, so every
     control in a list of them has the same two edges. A <select> is sized by
     its widest OPTION, so one row holding a list of checkpoint filenames was
     264px wide among four that were 140. */
  --control-col: 180px;
}

/* ── dark: the cutting-room palette (default) ─────────────────────────── */
/* Scoped to any [data-theme] element, not just :root, so a pane can render the
 * other theme in place — the catalogue shows both side by side that way. */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --elev-0: #0c0b09;   /* page          */
  --elev-1: #131210;   /* panel         */
  --elev-2: #1a1814;   /* raised, head  */
  --elev-3: #1f1c16;   /* overlay       */

  --hover:  #221f19;
  --active: #2a261e;

  --line:   #2a261e;
  --line-2: #37322833;

  --text:  #ece7db;
  --muted: #918a7a;
  --faint: #645e51;

  --accent:      #f3a93c;
  --accent-hi:   #ffc36b;
  --accent-lo:   #e0972a;
  --accent-soft: rgba(243, 169, 60, .14);
  --on-accent:   #1a1206;

  --teal:   #57d0c6;   /* render / audio semantic */
  --violet: #c084fc;   /* overlay / text layer    */
  --danger: #e8607a;
  --warn:   #e8a040;
  --good:   #79c479;
  --pink:   rgb(255, 120, 180);

  --void: #060606;     /* media letterbox */
  --shadow-ink: rgba(0, 0, 0, .85);
  --backdrop: rgba(6, 5, 4, .66);

  /* Film grain. `overlay` over a dark surface lifts it slightly and breaks up
     the flatness of a large area of one colour, which is most of this app. */
  --grain-opacity: .035;
  --grain-blend: overlay;

  /* A filled accent control, at rest and under the pointer.
     Dark's accent is amber carrying near-black text: it can go as bright as it
     likes, so the button sits at the accent and LIGHTENS when pressed towards.
     Which way hover moves is the opposite of light's, below. */
  --grad-accent:       linear-gradient(180deg, var(--accent), var(--accent-lo));
  --grad-accent-hover: linear-gradient(180deg, var(--accent-hi), var(--accent));
  --accent-hover-edge: var(--accent-hi);
}

/* ── light: white, grey and daylight blue ─────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --elev-0: #f5f7fa;
  --elev-1: #ffffff;
  --elev-2: #eef1f6;
  --elev-3: #ffffff;

  --hover:  #e1e7ef;
  --active: #d3dae3;

  --line:   #d3dae3;
  --line-2: #8a97a833;

  --text:  #16202c;
  --muted: #59677a;
  --faint: #8d9aab;

  --accent:      #2f7fd4;
  --accent-hi:   #5aa4ec;
  --accent-lo:   #2668b0;
  --accent-soft: rgba(47, 127, 212, .13);
  --on-accent:   #ffffff;

  --teal:   #12857c;
  --violet: #7c3aed;
  --danger: #c62a48;
  --warn:   #b26a00;
  --good:   #2f8f4e;
  --pink:   rgb(197, 45, 116);

  --void: #0a0c0f;
  --shadow-ink: rgba(24, 34, 48, .30);
  --backdrop: rgba(24, 34, 48, .34);

  /* The same grain over a light surface with `overlay` reads as dirt, so light
     multiplies a much fainter one. v4 landed on the same two numbers. */
  --grain-opacity: .015;
  --grain-blend: multiply;

  /* Light's accent carries WHITE text, which caps how bright the fill can be:
     past the accent itself the label starts disappearing into it. So the button
     sits AT the accent -- brighter than the accent-to-accent-lo fade it used to
     wear, which made it look washed against a white page -- and DARKENS under
     the pointer, where white only reads better. The opposite of dark's. */
  --grad-accent:       linear-gradient(180deg, var(--accent),
                                       color-mix(in srgb, var(--accent) 85%, var(--accent-lo)));
  --grad-accent-hover: linear-gradient(180deg, var(--accent-lo),
                                       color-mix(in srgb, var(--accent-lo) 82%, black));
  --accent-hover-edge: var(--accent-lo);
}

/* Derived values, written once so both themes get them for free. color-mix
 * percentages come from a fixed set: 12 / 22 / 30 / 45 / 60 / 80 — v4 had float
 * artefacts like 64.7%.
 *
 * The selector must include [data-theme], not just :root. A custom property's
 * var()s are substituted where the property is DECLARED and inherited already
 * resolved — so if these lived on :root alone, a scoped [data-theme="light"]
 * subtree would inherit the root theme's accent and shadow. Declaring them here
 * too makes each themed element re-derive them from its own palette. */
:root,
[data-theme] {
  --line-hover:  color-mix(in srgb, var(--accent) 30%, var(--line));
  --line-active: color-mix(in srgb, var(--accent) 60%, var(--line));
  --focus-ring:  0 0 0 3px var(--accent-soft);

  --shadow-1: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 45%, transparent);
  --shadow-2: 0 4px 12px color-mix(in srgb, var(--shadow-ink) 60%, transparent);
  --shadow-3: 0 12px 32px color-mix(in srgb, var(--shadow-ink) 80%, transparent);

  /* ── surfaces ────────────────────────────────────────────────────────
     Depth, derived from the palette rather than painted per component.
     A flat fill everywhere is what made this read as a wireframe of itself:
     every band, control and card was one colour with a 1px line around it,
     so nothing sat above anything else.

     Each of these is a vertical fall between two steps of the SAME theme's
     elevation scale, so dark falls darker and light falls lighter, and
     neither needs a rule of its own. */
  --grad-band:   linear-gradient(180deg, var(--elev-2),
                                 color-mix(in srgb, var(--elev-2) 55%, var(--elev-0)));
  --grad-raise:  linear-gradient(180deg, color-mix(in srgb, var(--elev-2) 72%, var(--elev-3)),
                                 var(--elev-2));


  /* A filled accent control throws a little of its own colour. Negative
     spread, so it is a bloom under the control and not a box around it. */
  --glow-accent: 0 4px 14px -6px var(--accent);

  /* The page is not one flat colour: a soft wash off the top-right corner,
     which is what stops a 1440px-wide dark background looking like paper. */
  --wash: radial-gradient(1200px 600px at 80% -10%,
                          color-mix(in srgb, var(--elev-2) 70%, transparent) 0%,
                          transparent 60%);

  --scroll-thumb:    color-mix(in srgb, var(--text) 16%, transparent);
  --scroll-thumb-hi: color-mix(in srgb, var(--text) 28%, transparent);
}

/* One guard covers the whole app, because every duration is a token.
 * v4 had 40 unguarded transitions — unguarded precisely because the durations
 * were hardcoded at each site. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}