/* =============================================================
   zejtun.com — Design Tokens
   ----------------------------------------------------------------
   All design decisions live here as CSS custom properties.
   This file is the single source of truth.
   Components reference tokens; tokens never reference components.

   Direction: "Festa Heritage" — limestone paper, deep ink,
   festa red as restrained accent, gold + olive as supporting.
   ============================================================= */

:root {
  /* =========================================================
     COLOR — RAW SCALES
     50 = lightest tint of the hue, 900 = deepest shade.
     Generated to be perceptually even (OKLCH-tuned, hex output).
     ========================================================= */

  /* Limestone / cream — page paper */
  --limestone-50:  #FFFCF5;
  --limestone-100: #FFF8EC;  /* canonical page bg */
  --limestone-200: #FBF1DE;
  --limestone-300: #F4E5C5;
  --limestone-400: #E8D2A0;
  --limestone-500: #D4B978;
  --limestone-600: #B89A57;
  --limestone-700: #8E763F;
  --limestone-800: #5F4E2A;
  --limestone-900: #3A2F19;

  /* Ink — warm dark brown for type, never pure black */
  --ink-50:  #F6EFE5;
  --ink-100: #E6D9C5;
  --ink-200: #C8B295;
  --ink-300: #A38667;
  --ink-400: #7A5E45;
  --ink-500: #543E2C;
  --ink-600: #3F2D1F;
  --ink-700: #2D1810;  /* canonical text color */
  --ink-800: #1F100A;
  --ink-900: #120804;

  /* Festa Red — primary accent (St Catherine) */
  --festa-50:  #FCEDE9;
  --festa-100: #F8D4CB;
  --festa-200: #F0A89A;
  --festa-300: #E47A66;
  --festa-400: #D45136;
  --festa-500: #B8311A;  /* canonical accent */
  --festa-600: #9A2614;
  --festa-700: #771C0F;
  --festa-800: #54140A;
  --festa-900: #320B05;

  /* Gold / Amber — secondary accent */
  --gold-50:  #FDF6E4;
  --gold-100: #FAEAC0;
  --gold-200: #F4D684;
  --gold-300: #EDC158;
  --gold-400: #E8B23E;  /* canonical gold */
  --gold-500: #C8932A;
  --gold-600: #A0741E;
  --gold-700: #785615;
  --gold-800: #50390C;
  --gold-900: #2C1F06;

  /* Olive — tertiary accent (Walks & Nature) */
  --olive-50:  #F1F2E5;
  --olive-100: #E1E4C5;
  --olive-200: #C2C795;
  --olive-300: #9FA567;
  --olive-400: #7E8645;
  --olive-500: #5A6B2C;  /* canonical olive */
  --olive-600: #485724;
  --olive-700: #36421B;
  --olive-800: #242C12;
  --olive-900: #131809;

  /* Tan / Warm brown — surfaces, dividers */
  --tan-50:  #FAF3E8;
  --tan-100: #F0E4CE;
  --tan-200: #E0CBA8;
  --tan-300: #C9AD7E;
  --tan-400: #AC8E5C;
  --tan-500: #8C7244;
  --tan-600: #6E5933;
  --tan-700: #524225;
  --tan-800: #382C18;
  --tan-900: #1F180D;


  /* =========================================================
     COLOR — SEMANTIC TOKENS
     Use these in components, not the raw scales.
     ========================================================= */

  /* Backgrounds */
  --bg-page:           var(--limestone-100); /* #FFF8EC */
  --bg-surface:        var(--limestone-50);  /* slightly lighter card */
  --bg-surface-warm:   var(--limestone-200); /* tan-tinted card */
  --bg-surface-gold:   var(--gold-100);      /* gold callout / card variant */
  --bg-surface-dark:   var(--ink-700);       /* dark card variant */
  --bg-inset:          var(--limestone-300); /* code blocks, inset panels */

  /* Text */
  --text-primary:      var(--ink-700);   /* body, headlines */
  --text-secondary:    var(--ink-500);   /* dek, secondary copy */
  --text-muted:        var(--tan-600);   /* meta, captions, eyebrows */
  --text-on-dark:      var(--limestone-100);
  --text-on-gold:      var(--ink-700);
  --text-on-red:       var(--limestone-100);

  /* Accents */
  --accent-primary:    var(--festa-500); /* festa red */
  --accent-primary-hover: var(--festa-600);
  --accent-secondary:  var(--gold-400);  /* festa gold */
  --accent-nature:     var(--olive-500); /* olive */

  /* Borders / rules */
  --border-subtle:     var(--limestone-300); /* hairline dividers */
  --border-default:    var(--tan-200);
  --border-strong:     var(--ink-700);       /* heavy editorial rule */

  /* Links */
  --link:              var(--festa-600);
  --link-hover:        var(--festa-700);
  --link-visited:      var(--festa-700);
  --link-underline:    var(--festa-300);

  /* States */
  --focus-ring:        var(--gold-400); /* warm gold ring */
  --focus-ring-on-red: var(--gold-300);
  --selection-bg:      var(--gold-200);
  --selection-fg:      var(--ink-700);

  /* Form / feedback */
  --field-bg:          var(--limestone-50);
  --field-border:      var(--tan-300);
  --field-border-focus: var(--ink-700);
  --field-placeholder: var(--tan-500);
  --error:             var(--festa-600);
  --error-bg:          var(--festa-50);
  --success:           var(--olive-600);
  --success-bg:        var(--olive-50);


  /* =========================================================
     TYPOGRAPHY
     Display: Source Serif 4 (h1, h2, large pull quotes)
     UI/Body: Public Sans (everything else)
     ========================================================= */

  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Modular scale (px, mobile-first; some sizes scale up via clamp at component level) */
  --fs-12: 0.75rem;   /* 12px — micro labels */
  --fs-14: 0.875rem;  /* 14px — captions, meta */
  --fs-16: 1rem;      /* 16px — body min */
  --fs-18: 1.125rem;  /* 18px — body large */
  --fs-20: 1.25rem;   /* 20px — lead paragraph */
  --fs-24: 1.5rem;    /* 24px — h4 / card headlines small */
  --fs-30: 1.875rem;  /* 30px — h3 */
  --fs-36: 2.25rem;   /* 36px — h2 small */
  --fs-48: 3rem;      /* 48px — h2 / h1 small */
  --fs-60: 3.75rem;   /* 60px — h1 hero */
  --fs-72: 4.5rem;    /* 72px — display hero, desktop */

  /* Line heights */
  --lh-tight:   1.1;   /* big display */
  --lh-snug:    1.2;   /* h1, h2 */
  --lh-heading: 1.3;   /* h3, h4 */
  --lh-body:    1.65;  /* body copy — generous for reading */
  --lh-ui:      1.4;   /* buttons, nav, captions */

  /* Letter spacing */
  --ls-tight:   -0.02em;  /* large display serif */
  --ls-snug:    -0.01em;  /* h2, h3 */
  --ls-normal:   0;
  --ls-wide:    0.04em;   /* small caps / labels */
  --ls-wider:   0.12em;   /* eyebrows */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;


  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */


  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-prose:  680px;   /* article body width */
  --container-wide:   1080px;  /* hero, grids */
  --container-full:   1280px;  /* outer chrome */
  --gutter-mobile:    var(--space-4);
  --gutter-desktop:   var(--space-7);


  /* =========================================================
     RADIUS
     ========================================================= */
  --radius-0:    0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-pill: 999px;


  /* =========================================================
     SHADOWS — used sparingly; this is a paper-feel system
     ========================================================= */
  --shadow-sm: 0 1px 2px rgba(45, 24, 16, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 24, 16, 0.08);
  --shadow-lg: 0 12px 32px rgba(45, 24, 16, 0.10);


  /* =========================================================
     BORDERS — common widths
     ========================================================= */
  --border-hairline: 1px;
  --border-rule:     2px;
  --border-emphasis: 4px;


  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;


  /* =========================================================
     Z-INDEX
     ========================================================= */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
}


/* =============================================================
   BREAKPOINTS — for reference; CSS uses media queries directly.
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1280px
   ============================================================= */


/* =============================================================
   CONTRAST NOTES (WCAG)
   ----------------------------------------------------------------
   Verified ratios against --bg-page (#FFF8EC):
     --text-primary  (ink-700  #2D1810)  → 14.6:1   ✓ AAA
     --text-secondary (ink-500 #543E2C)  →  9.1:1   ✓ AAA
     --text-muted   (tan-600   #6E5933)  →  6.0:1   ✓ AA  (large + body OK; AAA only on large)
     --link         (festa-600 #9A2614)  →  6.7:1   ✓ AA  body / AAA large
     --accent-primary (festa-500 #B8311A)→  5.0:1   ✓ AA  large only — DO NOT use for body text
     --accent-nature (olive-500 #5A6B2C) →  5.6:1   ✓ AA  body
     --accent-secondary (gold-400 #E8B23E)→ 1.9:1   ✗ — NEVER use for text on cream; OK as fill behind dark text

   On --bg-surface-dark (#2D1810):
     --text-on-dark (limestone-100)      → 14.6:1   ✓ AAA
     --gold-300 (#EDC158)                →  9.4:1   ✓ AAA  (use for highlights on dark)
     --festa-300 (#E47A66)               →  4.6:1   ✓ AA   large only

   On --bg-surface-gold (#FAEAC0):
     --text-on-gold (ink-700)            → 12.8:1   ✓ AAA

   Body copy meets AAA. UI/meta text meets AA.
   ============================================================= */