/* ============================================================================
   Nottaker — Design tokens  ("Slate & Ember" v2)
   ----------------------------------------------------------------------------
   THE SINGLE SOURCE OF TRUTH FOR EVERY VALUE. See SPEC.md §16 and DESIGN.md.

   Rules (binding):
     * Every color / spacing / radius / type value is a CSS custom property here.
     * base.css / components.css / editor.css reference ONLY var(--token).
       NO raw hex. NO off-scale px for spacing or radius. A reviewer can grep
       component CSS for `#` or stray `px` to find every violation.
     * This file is loaded FIRST, before any component stylesheet.
     * Dark-only for v1. A future light theme swaps the values in :root only.
   ============================================================================ */

:root {
  /* ==========================================================================
     SURFACES  (§16.2 — warm dark slate, low-glare; NOT pure black)
     ========================================================================== */
  --bg:             #15171C; /* app background — darkest surface */
  --surface-1:      #1B1E25; /* primary panel/card background */
  --surface-2:      #23272F; /* raised: inputs, hovered rows, menus */
  --surface-3:      #2D323C; /* highest raise: active/selected, popovers */
  --border:         #363B47; /* default hairline borders, RULES, dividers */
  --border-strong:  #454B59; /* emphasized borders, input border at rest */

  /* ==========================================================================
     TEXT  (§16.2 — warm off-white -> muted; NEVER pure white)
     ========================================================================== */
  --text-primary:   #EBE8E1; /* ~13.5:1 on --bg (AAA) — body, headings, transcription */
  --text-secondary: #B6B2A9; /* ~8:1 (AAA) — secondary text, labels */
  --text-muted:     #9E9A90; /* >=4.5:1 (AA) on bg/surface-1/2/3 (6.39/5.94/5.33/4.58) — metadata, placeholders, kickers */
  --text-disabled:  #5A5852; /* decorative only — never meaningful text */

  /* ==========================================================================
     ACCENT — "Ember"  (§16.2 — one warm accent, flat, NO gradient; SPOT INK)
     ========================================================================== */
  --accent:         #E0794B; /* primary action fill AND fine linework */
  --accent-hover:   #EC8A5E; /* hover state of accent elements */
  --accent-press:   #C9683D; /* pressed/active state */
  --accent-subtle:  #2A2019; /* accent-tinted bg (selected row, active nav) */
  --on-accent:      #19130F; /* text/icon placed ON an accent fill */

  /* ==========================================================================
     SEMANTIC  (§16.2 — desaturated; only on genuine status, never decoration)
     ========================================================================== */
  --success:        #7FA663; /* confirmed / saved */
  --warning:        #D6A24E; /* needs review, low-confidence */
  --danger:         #C96A5E; /* destructive actions, errors */
  --info:           #6E92A6; /* neutral informational notices */

  /* ==========================================================================
     FONT FAMILIES  (§16.1 — self-hosted woff2; sensible system fallbacks)
     ----------------------------------------------------------------------------
     ALLOWED: Geist Sans (UI/body), Instrument Serif (serif display), Geist Mono (data).
     FORBIDDEN: Inter, Roboto, Open Sans, Lato, Nunito, Poppins, Montserrat.
     ========================================================================== */
  --font-sans:  "Geist Sans", "IBM Plex Sans", "Hanken Grotesk",
                "Atkinson Hyperlegible", ui-sans-serif, system-ui,
                -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Newsreader", "Source Serif 4",
                ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:  "Geist Mono", "IBM Plex Mono", "JetBrains Mono",
                ui-monospace, "SF Mono", "Cascadia Code", Menlo,
                Consolas, monospace;

  /* ==========================================================================
     TYPE SCALE  (§16.1 — fixed; do NOT interpolate new sizes)
     Base 16px, ~1.25 ratio. Sizes + line-heights + weights as tokens.
     ========================================================================== */
  --text-xs:        0.75rem;   /* 12px — metadata, captions, timestamps */
  --text-xs-lh:     1.4;
  --text-sm:        0.875rem;  /* 14px — secondary UI text, labels */
  --text-sm-lh:     1.5;
  --text-base:      1rem;      /* 16px — body, transcription */
  --text-base-lh:   1.6;
  --text-lg:        1.125rem;  /* 18px — emphasized body, list item titles */
  --text-lg-lh:     1.5;
  --text-xl:        1.375rem;  /* 22px — card/note titles (serif) */
  --text-xl-lh:     1.2;
  --text-2xl:       1.75rem;   /* 28px — section headers (serif, high opsz) */
  --text-2xl-lh:    1.15;
  --text-3xl:       2.25rem;   /* 36px — page title (serif, high opsz) */
  --text-3xl-lh:    1.1;
  --display:        2.75rem;   /* 44px — masthead lede / hero (serif, high opsz) */
  --display-lh:     1.0;

  /* Font weights (§16.1 weight discipline) */
  --weight-regular: 400; /* sans/mono/body */
  --weight-medium:  500; /* sans/mono emphasis, kickers, serif headings */
  --weight-semibold:600; /* serif headings */
  --weight-bold:    700; /* serif DISPLAY ONLY (text-3xl / display) */

  /* ==========================================================================
     LETTER-SPACING  (§16.1 / §16.1a)
     ========================================================================== */
  --tracking-body:        0;        /* body text */
  --tracking-display:     -0.015em; /* serif display at large sizes (tight) */
  --tracking-kicker:      0.15em;   /* wide-tracked uppercase mono kicker */
  --tracking-label:      0.10em;    /* all-caps mono field/table labels */
  --tracking-fig:        0.12em;    /* FIG. NNN figure refs */
  --tracking-caption:    0.04em;    /* figure captions */

  /* ==========================================================================
     SPACING SCALE  (§16.3 — 4px base; NO off-scale values)
     ========================================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ==========================================================================
     RADIUS  (§16.4 — small, consistent; radius-full ONLY spinner/status dot)
     ========================================================================== */
  --radius-sm:   4px;     /* inputs, buttons, badges, small controls */
  --radius-md:   8px;     /* cards, panels, menus, images */
  --radius-lg:   12px;    /* large containers, modals */
  --radius-full: 9999px;  /* ONLY the in-flight spinner / a single status dot */

  /* ==========================================================================
     PRINT PRIMITIVES  (§16.1a — the signature; build helper classes off these)
     ========================================================================== */
  --kicker-size:        0.6875rem; /* ~11px — kicker labels, FIG refs, table headers */
  --kicker-weight:      500;
  /* --rule-kicker: the short spot-ink tick above a heading (32px x 2px accent).
     Components implement this as: width 32px; height 2px; background var(--accent).
     Exposed here as discrete dimension tokens so the helper class is consistent. */
  --rule-kicker-width:  32px;
  --rule-kicker-height: 2px;
  --rule-kicker-color:  var(--accent);
  /* Hairline rule = 1px solid var(--border). Masthead top rule = 2px text-primary. */
  --rule-hairline:      1px;
  --rule-masthead:      2px;

  /* ==========================================================================
     ELEVATION  (§16.5 — borders not shadows; ONE shadow for true overlays only)
     ========================================================================== */
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45); /* modal/popover/menu ONLY */
  --scrim:          rgba(0, 0, 0, 0.5);             /* modal backdrop dimming scrim */

  /* ==========================================================================
     FOCUS  (§16.6 — accessibility-critical; visible on every interactive el)
     ========================================================================== */
  --focus-ring-width:  2px;
  --focus-ring-color:  var(--accent);
  --focus-ring-offset: 2px;

  /* ==========================================================================
     MOTION  (§16.9 — functional only; 120–180ms ease-out)
     ========================================================================== */
  --transition-fast:  120ms ease-out;
  --transition-base:  150ms ease-out;
  --transition-slow:  180ms ease-out;

  /* ==========================================================================
     LAYOUT  (§16.8)
     ========================================================================== */
  --content-max:    1200px;  /* list/dashboard max content width */
  --prose-max:      70ch;    /* body & transcription line length */
  --touch-min:      44px;    /* mobile touch target minimum */
}

/* Respect reduced motion globally (§16.9 / §16.10). Components inherit this. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}