/* ============================================================================
   Felix Ihno — Design Tokens (compiled)
   Direction B "Surveyor" · locked 2026-06-17 · @version 1.0.0
   Source of truth: design-tokens.json  ·  Spec: FELIX-IHNO-DESIGN-SYSTEM.md
   Tools @import this one file and build with the L2 semantic tokens ONLY.

   Themes:  :root = light            [data-theme="dark"] = warm dark
   Accent:  default clay   [data-accent="green"] [data-accent="oxblood"]
   Print:   @media print  → black-on-white, hue re-encodes to fill+rule+hatch
   Fonts:   self-host Newsreader · Hanken Grotesk · IBM Plex Mono (OFL) —
            see FELIX-IHNO-DESIGN-SYSTEM.md §Fonts. Print pipeline uses Charter.
   Contrast: computed locally (WCAG rel-luminance) 2026-06-17.
   ========================================================================== */

:root {
  /* ── L1 · PRIMITIVES (raw ingredients — referenced only by L2) ────────── */
  --warm-paper:   #FAF5EC;   --warm-surface: #FFFBF3;
  --warm-900:     #29231C;   --warm-600:     #74675A;   --warm-400: #9A8E7D;
  --warm-hairline:#CDBFA9;   --warm-border:  #E0D5C4;
  --warm-dbg:     #1E1A16;   --warm-dsurf:   #261F19;
  --warm-d100:    #ECE3D6;   --warm-d300:    #AC9F8E;   --warm-d500: #7E7466;
  --warm-dborder: #3D352B;

  --clay:    #B0532F;  --clay-d:    #D2805C;
  --green:   #3C5A43;  --green-d:   #7FA383;
  --oxblood: #7C2E2A;  --oxblood-d: #C7766B;

  --sig-info-l:#3F5680; --sig-ok-l:#46743F; --sig-caution-l:#8A6310; --sig-danger-l:#9E3B2C;
  --sig-info-d:#9DB0E0; --sig-ok-d:#9CC79F; --sig-caution-d:#D9B566; --sig-danger-d:#E0917F;

  /* type scale · ratio 1.20 · reading base 18px (= 1.125rem) */
  --text-3xs:.6875rem; --text-2xs:.75rem; --text-xs:.9375rem; --text-sm:1.125rem;
  --text-md:1.375rem;  --text-lg:1.625rem; --text-xl:1.9375rem; --text-2xl:2.3125rem;
  --lh-tight:1.16; --lh-snug:1.3; --lh-ui:1.5; --lh-body:1.6;
  --tracking-eyebrow:.14em; --tracking-tight:-.01em;
  --weight-reg:400; --weight-med:500; --weight-semi:600; --weight-bold:700;

  /* space · 4px grid */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;

  --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
  --motion-fast:120ms; --motion-base:200ms; --ease-out:cubic-bezier(.2,.7,.3,1);

  /* ── L2 · SEMANTIC (components reference ONLY these) ──────────────────── */
  --color-bg:           var(--warm-paper);
  --color-surface:      var(--warm-surface);
  --color-text:         var(--warm-900);
  --color-text-muted:   var(--warm-600);   /* AA — secondary text */
  --color-text-faint:   var(--warm-400);   /* DECORATIVE ONLY — fails text contrast */
  --color-border:       var(--warm-border);
  --color-hairline:     var(--warm-hairline);

  --color-accent:       var(--clay);                                   /* default */
  --color-accent-soft:  color-mix(in srgb, var(--color-accent) 16%, transparent);
  --color-on-accent:    #FFF9F0;           /* text/icon on an accent fill */

  --color-signal-info:    var(--sig-info-l);
  --color-signal-ok:      var(--sig-ok-l);
  --color-signal-caution: var(--sig-caution-l);
  --color-signal-danger:  var(--sig-danger-l);

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;       /* editorial / headings / doc body */
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;/* UI / labels / data */
  --font-mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-heading: var(--font-serif);
  --font-ui:      var(--font-sans);
  --font-code:    var(--font-mono);

  --shadow-card: 0 1px 2px rgba(41,35,28,.06);
  --shadow-pop:  0 4px 14px rgba(41,35,28,.10);

  /* ── L2.5 · DATA-VIZ + STATE (round-2 component layer, 2026-06-17) ─────── */
  --viz-depth-1:#EAD9C4; --viz-depth-2:#DDB78F; --viz-depth-3:#CB8E5C; --viz-depth-4:#B0532F; --viz-depth-5:#7E3A1E; /* sequential urgency ramp · far→near · calm, never red */
  --viz-band:#F0E5D4;        /* sparkline normal-range band */
  --viz-spark:#74675A;       /* sparkline stroke */
  --viz-spark-point:#B0532F; /* sparkline endpoint + last value */
  --viz-cat-1:#B0532F; --viz-cat-2:#3C5A43; --viz-cat-3:#3F5680; --viz-cat-4:#8A6310; --viz-cat-5:#7C2E2A;
  /* categorical = data MARKS, not text. Each series MUST also carry a non-color cue for mono:
     cat-1 solid·● · cat-2 dashed·■ · cat-3 dotted·▲ · cat-4 dash-dot·◆ · cat-5 long-dash·＋ */
  --color-focus-ring: color-mix(in srgb, var(--color-accent) 42%, transparent);
}

/* ── L3 · ACCENT VARIANTS (one identity, swap the accent by context) ────── */
[data-accent="green"]   { --color-accent: var(--green); }
[data-accent="oxblood"] { --color-accent: var(--oxblood); }

/* ── L3 · DARK THEME (warm — never blue-black) ──────────────────────────── */
[data-theme="dark"] {
  --color-bg:         var(--warm-dbg);
  --color-surface:    var(--warm-dsurf);
  --color-text:       var(--warm-d100);
  --color-text-muted: var(--warm-d300);
  --color-text-faint: var(--warm-d500);
  --color-border:     var(--warm-dborder);
  --color-hairline:   var(--warm-dborder);
  --color-accent:     var(--clay-d);
  --color-on-accent:  var(--warm-dbg);
  --color-signal-info:    var(--sig-info-d);
  --color-signal-ok:      var(--sig-ok-d);
  --color-signal-caution: var(--sig-caution-d);
  --color-signal-danger:  var(--sig-danger-d);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:  0 6px 18px rgba(0,0,0,.45);
  --viz-depth-1:#3A2C20; --viz-depth-2:#6A4530; --viz-depth-3:#96603F; --viz-depth-4:#C0764B; --viz-depth-5:#D2805C;
  --viz-band:#2B2219; --viz-spark:#AC9F8E; --viz-spark-point:#D2805C;
  --viz-cat-1:#D2805C; --viz-cat-2:#7FA383; --viz-cat-3:#9DB0E0; --viz-cat-4:#D9B566; --viz-cat-5:#C7766B;
}
[data-theme="dark"][data-accent="green"]   { --color-accent: var(--green-d); }
[data-theme="dark"][data-accent="oxblood"] { --color-accent: var(--oxblood-d); }

/* ── L3 · PRINT (mono laser: black on white; hue → fill + rule + hatch) ─── */
@media print {
  :root {
    --color-bg:#fff; --color-surface:#fff; --color-text:#000;
    --color-text-muted:#333; --color-text-faint:#555;
    --color-border:#000; --color-hairline:#000;
    --color-accent:#000; --color-accent-soft:transparent; --color-on-accent:#fff;
    --color-signal-info:#000; --color-signal-ok:#000;
    --color-signal-caution:#000; --color-signal-danger:#000;
    --shadow-card:none; --shadow-pop:none;
    --viz-depth-1:#E0E0E0; --viz-depth-2:#BDBDBD; --viz-depth-3:#8A8A8A; --viz-depth-4:#4D4D4D; --viz-depth-5:#000;
    --viz-band:#EAEAEA; --viz-spark:#000; --viz-spark-point:#000;
    --viz-cat-1:#000; --viz-cat-2:#000; --viz-cat-3:#000; --viz-cat-4:#000; --viz-cat-5:#000;
    --color-focus-ring:transparent;
    /* categorical series separate by dash + marker SHAPE (and SVG hatch fills), not color — see component layer */
  }
  /* status re-encodes by FILL + RULE (apply these classes on print surfaces): */
  .is-live    { font-weight:600; }                 /* solid fill + 2px rule  */
  .is-active  { }                                   /* half fill  + 1px rule  */
  .is-pending { }                                   /* hollow     + dotted    */
  /* urgency re-encodes as hatch density — use .hatch on the progress fill:   */
  .hatch { background:repeating-linear-gradient(45deg,#000 0,#000 2px,#fff 2px,#fff 4px); }
}

/* keyboard focus ring — on-brand, follows the active accent (round-2) */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--color-accent); outline-offset:2px;
  box-shadow:0 0 0 4px var(--color-focus-ring); border-radius:var(--radius-sm);
}
/* skeleton shimmer (paused by reduced-motion below) */
@keyframes fi-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }