/* Design tokens only (docs/11-design-language.md). Light ("lights up") is the default; dark ("lights down") via
   <html data-theme="dark">. Two ideas drive every value: the FRAME (a mat around the viewport whose width and tone
   say which mode you are in) and the SPINE (a vertical time line; timecodes sit in a left gutter). */
:root {
  color-scheme: light dark;

  /* Colour — light. Ink on paper; the playhead is the only colour. */
  --bg: #F3F1EB;
  --surface: #FBFAF6;
  --surface-2: #E6E3DA;
  --text: #141618;
  --text-muted: #53575C;
  --accent: #2B39C4;          /* the playhead: now, current, primary */
  --on-accent: #FFFFFF;
  --accent-hover: #1F2A9C;
  --link: var(--text);        /* links are ink with a rule under them */
  --accent-soft: #E2E5FA;
  --mark: #FFE16A;
  --border: #CBC6BA;          /* hairline rules, decorative */
  --border-strong: #767A7F;   /* control edges, ≥ 3:1 */
  --focus: #141618;
  --danger: #B3261E;
  --success: #1B7A35;
  --warning: #8A5A00;
  --warning-bg: #FBEFCB;
  --shield-bg: #101214;
  --shield-text: #F2F2F2;
  --shield-muted: #B8BEC6;
  --shield-focus: #FFFFFF;
  --bg-focus: #0A0B0C;

  /* Frame (passe-partout) */
  --mat: #DCD7CB;
  --mat-edge: #767A7F;        /* 1 px line where the mat meets the picture */
  --mat-student: #9FB7E8;     /* student view: the frame itself says "teacher's link" */

  /* Spine */
  --spine: var(--border);
  --tick-ring: var(--border-strong);

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-time: var(--font-mono);
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: clamp(2.75rem, 7vw, 4.75rem);
  --fw-normal: 400;
  --fw-bold: 600;
  --fw-heavy: 750;
  --lh-body: 1.5;
  --lh-heading: 1.12;
  --ls-tight: -0.035em;
  --ls-caps: 0.09em;

  /* Spacing (4 px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Shape: rectangles are things, circles are moments. Only time-related marks are round. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-full: 0;
  --r-moment: 50%;
  --rule: 1px;
  --rule-bold: 3px;           /* the playhead bar under the current tab, nav item or pressed tool */

  /* Elevation: nothing casts a shadow. Floating sheets are framed by the mat instead. */
  --shadow-1: none;
  --shadow-dialog: none;
  --float-frame: 0 0 0 6px var(--mat), 0 0 0 7px var(--mat-edge);

  /* Layout */
  --content-max: 1100px;
  --prose-max: 720px;
  --panel-w: 360px;
  --header-h: 56px;
  --hit: 44px;
  --frame-browse: 6px;       /* body picks one per route (base.css) */
  --frame-watch: 4px;
  --frame: var(--frame-browse);
  --gutter: 16px;
  --page-pad: calc(var(--frame) + var(--gutter));
  --t-col: 3.25rem;           /* timecode column of a spine list */
  --spine-gap: 24px;          /* column the spine and its ticks live in */
  --tick: 11px;

  /* z-index */
  --z-base: 0;
  --z-shield: 10;
  --z-header: 20;
  --z-frame: 26;
  --z-toast: 40;
  --z-dialog: 50;

  /* Motion: only time moves. Everything else changes state fast and without travel. */
  --dur-fast: 90ms;
  --dur: 160ms;
  --ease: cubic-bezier(.3, 0, 0, 1);
}

:root[data-theme="dark"] {
  --bg: #0E1011;
  --surface: #16181A;
  --surface-2: #212427;
  --text: #EDEAE3;
  --text-muted: #A3A8AE;
  --accent: #9AA5FF;
  --on-accent: #0B0D24;
  --accent-hover: #B6BEFF;
  --accent-soft: #1D2247;
  --mark: #5E4B0E;
  --border: #34383C;
  --border-strong: #70767C;
  --focus: #EDEAE3;
  --danger: #F2918A;
  --success: #7FCB94;
  --warning: #F0C04E;
  --warning-bg: #352C17;
  --mat: #000000;
  --mat-edge: #4A4F55;
  --mat-student: #26305E;
}

/* No JS (e.g. 404.html): follow the system theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0E1011;
    --surface: #16181A;
    --surface-2: #212427;
    --text: #EDEAE3;
    --text-muted: #A3A8AE;
    --accent: #9AA5FF;
    --on-accent: #0B0D24;
    --accent-hover: #B6BEFF;
    --accent-soft: #1D2247;
    --mark: #5E4B0E;
    --border: #34383C;
    --border-strong: #70767C;
    --focus: #EDEAE3;
    --danger: #F2918A;
    --success: #7FCB94;
    --warning: #F0C04E;
    --warning-bg: #352C17;
    --mat: #000000;
    --mat-edge: #4A4F55;
    --mat-student: #26305E;
  }
}

@media (min-width: 600px) {
  :root { --frame-browse: 10px; --frame-watch: 6px; --gutter: 24px; --t-col: 3.75rem; }
}
@media (min-width: 1000px) {
  :root { --frame-browse: 20px; --frame-watch: 8px; }
}

@media (prefers-contrast: more) {
  :root, :root[data-theme="dark"] {
    --border: var(--border-strong);
    --text-muted: var(--text);
    --spine: var(--border-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}