/*
 * WACAM design tokens.
 *
 * Two layers:
 *   1. Raw tokens — palette ramps, type scale, spacing scale (--color-*, --text-*, etc.)
 *   2. Semantic tokens — what to USE (--surface, --ink, --brand). Map to raw.
 *
 * Templates should read semantic tokens almost exclusively. Dark mode flips
 * the semantic layer without touching the raw ramps.
 *
 * Brand source: brand-palette.json (sampled from logo, May 2026).
 *   Green anchor: #0f7041 lives at green-700.
 *   Gold anchor:  #d7b56d lives at gold-400.
 */

:root {
  /* ---------- Color: raw ramps ---------- */

  /* Green ramp — anchor #0f7041 at 700 (sampled from logo) */
  --color-green-50:  #f5faf7;
  --color-green-100: #e6f5ed;
  --color-green-200: #c4edd9;
  --color-green-300: #92e8be;
  --color-green-400: #58e4a0;
  --color-green-500: #1dd87d;
  --color-green-600: #16a25e;
  --color-green-700: #0f7041;
  --color-green-800: #0e492c;
  --color-green-900: #0a291a;

  /* Gold ramp — anchor #d7b56d at 400 (sampled from logo) */
  --color-gold-50:  #f9f8f5;
  --color-gold-100: #f3efe8;
  --color-gold-200: #e8dec9;
  --color-gold-300: #ddc89d;
  --color-gold-400: #d7b56d;
  --color-gold-500: #c09335;
  --color-gold-600: #906f27;
  --color-gold-700: #68501d;
  --color-gold-800: #423315;
  --color-gold-900: #251e0e;

  /* Neutrals — warm to complement gold */
  --color-sand-50:  #f8f4ec;
  --color-sand-100: #f0e9d9;
  --color-sand-200: #e6d9bc;
  --color-ink-100:  #e1e5e2;
  --color-ink-200:  #c6cecb;
  --color-ink-300:  #a1ada6;
  --color-ink-400:  #7e8c84;
  --color-ink-500:  #5c6b63;
  --color-ink-600:  #455048;
  --color-ink-700:  #2f3a34;
  --color-ink-800:  #1e2622;
  --color-ink-900:  #0b0f0d;
  --color-paper:    #ffffff;
  --color-hairline: #e6e2d8;

  /* Functional — not in logo, used for UI state only */
  --color-red-50:   #fbeae5;
  --color-red-600:  #b5321e;
  --color-red-700:  #8d2317;

  /* ---------- Color: semantic ---------- */

  --bg:              var(--color-sand-50);
  --bg-elevated:     var(--color-paper);
  --bg-muted:        var(--color-sand-100);
  --bg-inverse:      var(--color-ink-900);

  --ink:             var(--color-ink-900);
  --ink-soft:        var(--color-ink-700);
  --ink-muted:       var(--color-ink-500);
  --ink-faint:       var(--color-ink-300);
  --ink-inverse:     var(--color-sand-50);
  --ink-inverse-muted: var(--color-ink-300);

  --border:          var(--color-hairline);
  --border-strong:   var(--color-ink-200);

  --brand:           var(--color-green-700);
  --brand-hover:     var(--color-green-800);
  --brand-soft:      var(--color-green-100);
  --brand-on:        var(--color-paper);

  --accent:          var(--color-gold-400);
  --accent-hover:    var(--color-gold-500);
  --accent-soft:     var(--color-gold-50);
  --accent-on:       var(--color-ink-900);

  --link:            var(--color-green-700);
  --link-hover:      var(--color-green-800);

  --danger:          var(--color-red-600);
  --danger-soft:     var(--color-red-50);
  --danger-on:       var(--color-paper);

  --focus-ring:      var(--color-green-700);

  /* ---------- Typography ---------- */

  /* Self-hosted fonts get wired in PR #5; system stack is the fallback. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia,
                "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Type scale — Major Third (1.25) anchored at 18px body */
  --text-xs:   0.8rem;     /* 12.8px */
  --text-sm:   0.9rem;     /* 14.4px */
  --text-base: 1.125rem;   /* 18px — body */
  --text-lg:   1.4rem;     /* 22.4px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.2rem;     /* 35.2px */
  --text-3xl:  2.75rem;    /* 44px */
  --text-4xl:  3.4rem;     /* 54.4px */
  --text-5xl:  4.3rem;     /* 68.8px */
  --text-6xl:  5.4rem;     /* 86.4px — display */
  --text-7xl:  6.75rem;    /* 108px — display large */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-eyebrow: 0.18em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ---------- Layout ---------- */
  --container-tight: 55rem;   /* ~704px — article reading width */
  --container-prose: 85rem;   /* ~896px — wide prose */
  --container-wide:  92rem;   /* ~1152px — content with sidebar */
  --container-max:   108rem;   /* ~1408px — hero / full grid */

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.06),
               0 1px 3px -1px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.08),
               0 4px 12px -4px rgb(0 0 0 / 0.04);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 35%, transparent);

  /* ---------- Z-index layers ---------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   1000;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}