/* =========================================================================
   Steady Chapter — Design Tokens
   Calm, paper-warm, Australian. Eucalyptus accent. Light-only with dark-ready
   semantic mapping (swap the lower block for dark mode later).
   ========================================================================= */

:root {
  /* ----- Palette: Paper (warm neutrals, our backgrounds + body) ----- */
  --paper-50:  #FBF8F2;  /* page background, warmest */
  --paper-100: #F4EFE6;  /* surface, cards on page */
  --paper-200: #ECE5D6;  /* hover surface, quiet dividers */
  --paper-300: #DDD3BD;  /* borders, rule lines */
  --paper-400: #C4B89C;  /* muted, disabled */

  /* ----- Palette: Ink (text + structure) ----- */
  --ink-900: #1F1D17;    /* display text */
  --ink-800: #2C2A21;    /* primary text */
  --ink-700: #3D3929;    /* body text */
  --ink-600: #585341;    /* secondary text */
  --ink-500: #7D7867;    /* tertiary, captions */
  --ink-400: #9C9786;    /* placeholder */
  --ink-300: #BAB5A4;    /* faint */

  /* ----- Palette: Eucalyptus (primary accent — calm Australian green) ----- */
  --euc-50:  #EEF2F0;
  --euc-100: #DDE6E2;
  --euc-200: #B8C9C2;
  --euc-300: #8AA89E;
  --euc-400: #5C8478;
  --euc-500: #3F5E54;    /* PRIMARY accent */
  --euc-600: #344E46;
  --euc-700: #2A3F38;
  --euc-800: #1F2E29;

  /* ----- Brand accents (pillar themes — used sparingly) ----- */
  --gold:       #BDA767;  /* Lawyer / "pay per session" */
  --terracotta: #B5826E;  /* AI agent / annotation */
  --plum:       #7C5A78;  /* Calm support / companion */

  /* ----- Palette: Signal (semantic, used sparingly) ----- */
  --signal-care-bg:    #F5E8E2;  /* care / pause */
  --signal-care-fg:    #8A4A33;
  --signal-care-line:  #D9B5A4;

  --signal-warn-bg:    #F5EBD4;
  --signal-warn-fg:    #7A5A1F;
  --signal-warn-line:  #DDC78A;

  --signal-stop-bg:    #F0DAD2;
  --signal-stop-fg:    #8B3A2A;
  --signal-stop-line:  #D4A293;

  --signal-ok-bg:      #E2EBE2;
  --signal-ok-fg:      #3F5E3F;
  --signal-ok-line:    #B5C8B5;

  /* ----- Semantic mapping (use these in components) ----- */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-100);
  --bg-raised:      #FFFFFF;
  --bg-hover:       var(--paper-200);
  --bg-muted:       var(--paper-200);

  --border-subtle:  var(--paper-200);
  --border-default: var(--paper-300);
  --border-strong:  var(--ink-300);

  --text-display:   var(--ink-900);
  --text-primary:   var(--ink-800);
  --text-body:      var(--ink-700);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-on-accent: #FBF8F2;

  --accent:         var(--euc-500);
  --accent-hover:   var(--euc-600);
  --accent-press:   var(--euc-700);
  --accent-soft-bg: var(--euc-50);
  --accent-soft-fg: var(--euc-700);

  /* ----- Typography ----- */
  --font-display: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", "Apple Garamond", "Palatino", Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — major-third (1.25) tuned for editorial reading */
  --fs-12: 0.75rem;    /* 12 — caption */
  --fs-13: 0.8125rem;  /* 13 — meta */
  --fs-14: 0.875rem;   /* 14 — small */
  --fs-15: 0.9375rem;  /* 15 — UI default */
  --fs-16: 1rem;       /* 16 — body */
  --fs-18: 1.125rem;   /* 18 — large body */
  --fs-20: 1.25rem;    /* 20 — h5 */
  --fs-24: 1.5rem;     /* 24 — h4 */
  --fs-30: 1.875rem;   /* 30 — h3 */
  --fs-38: 2.375rem;   /* 38 — h2 */
  --fs-48: 3rem;       /* 48 — h1 */
  --fs-64: 4rem;       /* 64 — display */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;

  /* ----- Spacing (4px base) ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ----- Radii — soft, never sharp, never pill-ish for cards ----- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ----- Shadows — paper-soft, not floaty ----- */
  --shadow-xs: 0 1px 0 rgba(31, 29, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 29, 23, 0.05), 0 1px 1px rgba(31, 29, 23, 0.03);
  --shadow-md: 0 2px 4px rgba(31, 29, 23, 0.05), 0 4px 12px rgba(31, 29, 23, 0.06);
  --shadow-lg: 0 4px 8px rgba(31, 29, 23, 0.05), 0 12px 32px rgba(31, 29, 23, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(31, 29, 23, 0.03);
  --shadow-focus: 0 0 0 3px rgba(63, 94, 84, 0.18);

  /* ----- Motion — unhurried, never bouncy ----- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.4, 0, 0.1, 1);

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-deliberate: 700ms;  /* for cooling-off-style affordances */

  /* ----- Layout ----- */
  --content-narrow: 640px;
  --content-prose:  720px;
  --content-wide:   960px;
  --content-max:    1200px;
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}