/* ============================================================
   Muisti — design tokens. SINGLE SOURCE OF TRUTH.
   Direction: "Käyttöohje" (field manual), dual ink:
   DARK = the canonical brand edition. LIGHT = the paper manual
   (warm paper, same accents recalibrated). Read
   DESIGN-CONSTITUTION.md before changing ANY value here.

   Theme mechanism: light-dark() everywhere; the page follows
   prefers-color-scheme until the masthead "Muste · Ink" control
   forces [data-theme] (persisted, applied pre-paint by the inline
   head script in index.html). Browsers without light-dark()
   (pre-2024) get the plain dark fallbacks declared first.

   ============================================================
   CANONICAL BRAND HUES
   Source of truth until the app's DesignSystem package exists;
   DesignSystem must adopt these exact values, after which the
   app becomes the source of truth per the brand hierarchy
   (see DESIGN-CONSTITUTION.md "Brand hierarchy").

     Indigo (structure accent):  #3F49B4 on light paper
                                 #8A93E8 recalibrated for dark
     Teal (live/refusal accent): #17756D on light paper
                                 #4FC4BB recalibrated for dark,
                                          and constant inside the
                                          dark glass panels
   ============================================================ */

:root {
  /* ---- fallback: dark canonical (browsers without light-dark()) ---- */
  --paper: #14151C;
  --paper-raised: #1C1D26;
  --ink: #EDEEF4;
  --ink-soft: #A6A9BC;
  --line: #2C2D38;
  --indigo: #8A93E8;
  --teal: #4FC4BB;

  color-scheme: light dark;

  /* ---- dual theme: EVERY token pair with its computed WCAG ratio ----
     (spot-verified at runtime by tests/e2e.mjs §7c on real computed styles)
     pair                       light     dark     requirement
     ink        / paper         16.5:1    15.7:1   3.0 (large text)
     ink-soft   / paper          7.2:1     7.8:1   4.5 (body, labels)
     ink-soft   / paper-raised   7.7:1     7.2:1   4.5
     indigo     / paper          7.0:1     6.4:1   4.5 (mono labels)
     indigo     / paper-raised   7.4:1     5.9:1   4.5
     teal       / paper          5.2:1     8.6:1   4.5
     teal       / paper-raised   5.5:1     7.9:1   3.0 (editor cursor, UI)
     panel-text / panel-bg      15.5:1 constant    4.5
     panel-dim  / panel-bg       7.2:1 constant    4.5
     teal-panel / panel-bg       8.9:1 constant    4.5                     */
  --paper: light-dark(#FAF8F2, #14151C);
  --paper-raised: light-dark(#FFFFFF, #1C1D26);
  --ink: light-dark(#1B1917, #EDEEF4);
  --ink-soft: light-dark(#575349, #A6A9BC);
  --line: light-dark(#DFD9CC, #2C2D38);
  --indigo: light-dark(#3F49B4, #8A93E8);
  --teal: light-dark(#17756D, #4FC4BB);

  --line-strong: var(--ink); /* structural keylines */

  /* -- the dark glass object (capture panel, shelf): CONSTANT across themes.
        Decision: in light mode the panel deliberately stays dark glass; it is
        the real app panel photographed on paper. Documented in HANDOFF.md. -- */
  --panel-bg-a: #191B2E;
  --panel-bg-b: #10111F;
  --panel-text: #E8E9F2;
  --panel-dim: #9BA0B8;
  --panel-line: rgba(255, 255, 255, 0.09);
  --teal-panel: #4FC4BB; /* live caret + refusal inside glass, both themes */

  /* -- type -- */
  --font-grotesk: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (fluid where it earns it) */
  --text-label: 0.6875rem;                    /* 11px mono labels, letter-spaced */
  --text-mono: 0.78rem;                       /* 12.5px mono body */
  --text-body: 1.0625rem;                     /* 17px */
  --text-lede: clamp(1.125rem, 1.5vw, 1.1875rem);
  --text-section: clamp(1.75rem, 3.5vw, 2.75rem);
  --text-hero: clamp(3rem, 7.5vw, 6.5rem);

  --track-label: 0.09em;

  /* -- space scale (4-base) -- */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 64px; --s7: 96px;

  /* page gutter */
  --gutter: clamp(20px, 4vw, 48px);

  /* -- the manual grid: EVERY section uses this. prose left, figure rail right.
        collapses to one column below 900px (breakpoint mirrored in site.css
        media queries; keep them in sync). -- */
  --rail-w: clamp(300px, 27vw, 400px);
  --manual-cols: minmax(0, 1fr) var(--rail-w);
  --manual-gap: var(--s6);
  --content-max: 1200px; /* keylines run full-bleed; content centers inside this */
  --sheet-pad: max(var(--gutter), calc((100% - var(--content-max)) / 2));

  /* -- radius -- */
  --r-panel: 14px;
  --r-key: 18px;
  --r-clip: 10px;

  /* -- motion: near-none. instant is the brand; ONE spring for the panel -- */
  --instant: 90ms linear;
  --summon: 240ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* manual override from the "Muste · Ink" control (set pre-paint) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }