/* ============================================================
   Wojtek Staszczyk — Design Tokens (single source of truth)
   Extracted from colors_and_type.css on 2026-07-13 (RUI-04).
   EVERY page links this file FIRST, before any inline <style>.
   Element styles for case studies live in colors_and_type.css.
   Rules: see personal site/CLAUDE.md → "Design system rules".
   ============================================================ */

:root {
  /* ---------- COLOR: WARM NEUTRAL FOUNDATION ------------- */
  --linen-50:  #FAF7F0;  /* paper / page bg */
  --linen-100: #F5F1EA;  /* primary cream bg (matches --cream) */
  --linen-200: #EDE6D8;  /* secondary / card bg (matches --cream-2) */
  --linen-300: #D9D1C0;  /* border / hairline (matches --line) */
  --linen-400: #9A8471;  /* lighter muted — decorative/15px+ only (3.15:1 on cream) */
  --linen-500: #6B6357;  /* muted text / meta (matches --muted, 5.26:1 on cream) */

  --ink-900: #1A1815;    /* primary text (matches --ink) */
  --ink-800: #3A352E;    /* soft ink (matches --ink-soft) */
  --ink-700: #4A3D34;
  --ink-600: #5C4E45;

  /* ---------- COLOR: ACCENT (the "20%") ------------------- */
  /* V3: dark amber — audit batch-1 (brand differentiation, 2026-05-27) */
  --copper-50:  #F5EDD6;  /* very light amber */
  --copper-100: #E8D5A8;  /* light amber */
  --copper-300: #C4915C;  /* mid amber — used for borders, sub-accents (6.4:1 on ink) */
  --copper-500: #7a4a0a;  /* PRIMARY ACCENT — matches --accent (6.6:1 on cream) */
  --copper-600: #5a3508;  /* hover (matches --accent-2, 9.6:1 on cream) */
  --copper-700: #4A2C06;  /* dark amber — used for labels, small text */
  --copper-900: #2A1804;  /* very dark amber */

  /* Aliases: terra-* (case studies) → copper-* */
  --terra-50:  var(--copper-50);
  --terra-100: var(--copper-100);
  --terra-300: var(--copper-300);
  --terra-500: var(--copper-500);
  --terra-600: var(--copper-600);
  --terra-700: var(--copper-700);
  --terra-900: var(--copper-900);

  /* Aliases: short-name tokens (main pages) → semantic tokens */
  --cream:    var(--linen-100);   /* #f5f1ea */
  --cream-2:  var(--linen-200);   /* #ede6d8 */
  --paper:    var(--linen-50);    /* #faf7f0 */
  --ink:      var(--ink-900);     /* #1a1815 */
  --ink-soft: var(--ink-800);     /* #3a352e */
  --muted:    var(--linen-500);   /* #6b6357 */
  --line:     var(--linen-300);   /* #d9d1c0 */
  --accent:   var(--copper-500);  /* primary accent */
  --accent-2: var(--copper-600);  /* pressed / hover */

  /* ---------- COLOR: ON-DARK TEXT (RUI-03) ---------------- */
  /* Hand-picked warm steps for #1a1815 sections. NEVER use
     rgba(cream, opacity) for text on dark — it fails contrast
     and reads washed out (Refactoring UI pp. 36-38, 142). */
  --fg-on-dark-1: var(--linen-100); /* values, headings (15.2:1) */
  --fg-on-dark-2: var(--linen-300); /* ledes, secondary (9.9:1)  */
  --fg-on-dark-3: var(--linen-400); /* labels, meta (4.99:1)     */
  --accent-on-dark: #D4A06A;        /* amber for dark bg (7.6:1) */
  --line-on-dark: rgba(245, 241, 234, .15); /* hairlines on ink  */

  /* ---------- COLOR: SEMANTIC ---------------------------- */
  --success: #5A7A3E;
  --warning: #C28A2C;
  --danger:  #B8412E;
  --info:    #5C6B7A;

  /* ---------- FG / BG / BORDER -------------------------- */
  --bg-canvas:   var(--linen-100);   /* #f5f1ea — main cream */
  --bg-surface:  var(--linen-50);    /* #faf7f0 — paper/cards */
  --bg-muted:    var(--linen-200);   /* #ede6d8 — recessed */
  --bg-inverse:  var(--ink-900);     /* #1a1815 — dark sections */

  --fg-1: var(--ink-900);
  --fg-2: var(--linen-500);
  --fg-3: var(--linen-400);
  --fg-accent: var(--copper-500);
  --fg-on-accent: var(--linen-50);
  --fg-on-dark: var(--linen-100);

  --border-hairline: var(--linen-300);
  --border-strong:   var(--linen-400);

  /* ---------- TYPE: FAMILIES ----------------------------- */
  --font-serif: 'Chivo', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE: SCALE --------------------------------
     The only text sizes. 12px (.75rem) is the floor.
     .75 / .875 / 1 / 1.125 / 1.25 / 1.375 / 1.5 / 1.75 rem
     + display clamps below. (Refactoring UI pp. 88-93)      */
  --fs-display-xl: clamp(3.5rem, 7vw, 6rem);
  --fs-display-lg: clamp(2.5rem, 5vw, 4.5rem);
  --fs-display-md: clamp(2rem, 3.5vw, 3rem);
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.1875rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* ---------- TYPE: WEIGHTS ------------------------------ */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- TYPE: LEADING / TRACKING ------------------- */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---------- SPACING (8px base) ------------------------- */
  --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;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- LAYOUT: 80/20 RATIO GRID ------------------- */
  --col-wide: 80fr;
  --col-narrow: 20fr;
  --content-max: 72rem;
  --prose-max: 40rem;

  /* ---------- RADII (the only four; two-tier) -------------
     flat stamps (tags/badges/chips): --radius-1 (2px)
     controls (buttons/nav-cv/fields)
       + cards + content imagery:     --radius-2 (6px)
     modals + hero imagery:           --radius-3 (10px)
     dots / pills:                    --radius-pill          */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-4: 16px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm-tinted) ---------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26,24,21,0.04), 0 1px 1px rgba(26,24,21,0.03);
  --shadow-2: 0 2px 8px rgba(26,24,21,0.06), 0 1px 2px rgba(26,24,21,0.04);
  --shadow-3: 0 8px 24px rgba(26,24,21,0.08), 0 2px 4px rgba(26,24,21,0.04);
  --shadow-focus: 0 0 0 3px rgba(122, 74, 10, 0.18); /* amber — was terracotta (RUI-06) */

  /* ---------- MOTION ------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entry:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}