/* css/tokens.css — Design Tokens : PROVEN palette + system
   Palette cites: #0B1A2E navy, #B8965A gold, #7A8C62 sage, #B8AFA2 taupe, #F8F6F1 cream, #F2EFEA ivory
   Fix: theme-color #072144 -> #0B1A2E (this file:10) */
:root{
  /* ——— Palette (PROVEN same as source) ——— */
  --navy: #0B1A2E;        /* primary / text on light, bg on dark  css/tokens.css:6 */
  --navy-80: #132842;
  --navy-60: #1E3552;
  --gold: #8C7434;        /* accent / CTA / rule  css/tokens.css:9 — darkened for WCAG AA on cream */
  --gold-600: #7A6428;
  --gold-300: #D9C7A0;
  --gold-100: #F0E6CD;
  --sage: #7A8C62;        /* secondary accent  css/tokens.css:13 */
  --sage-600: #5E6D4B;
  --sage-100: #E6EADF;
  --taupe: #B8AFA2;       /* stone / muted line  css/tokens.css:16 */
  --taupe-600: #8A8278;
  --taupe-100: #E9E4DD;
  --cream: #F8F6F1;       /* linen page bg  css/tokens.css:19 */
  --ivory: #F2EFEA;       /* sand alt bg  css/tokens.css:20 */
  --white: #FFFFFF;
  --ink: #0B1A2E;
  --ink-70: rgba(11,26,46,0.70);
  --ink-55: rgba(11,26,46,0.55);
  --ink-30: rgba(11,26,46,0.30);
  --line: rgba(11,26,46,0.08);
  --line-strong: rgba(11,26,46,0.14);
  --shadow: rgba(11,26,46,0.06); /* spec shadow  css/tokens.css:27 */
  --shadow-soft: 0 8px 32px rgba(11,26,46,0.06);
  --shadow-medium: 0 16px 48px rgba(11,26,46,0.10);
  --shadow-elevated: 0 24px 64px rgba(11,26,46,0.14);

  /* ——— Typography ——— */
  --font-display: "Fraunces", Georgia, serif; /* 300 weight  css/tokens.css:32 */
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.72;
  --lh-loose: 1.85;
  --measure: 64ch; /* editorial measure 58-68ch  css/tokens.css:38 */
  --measure-narrow: 52ch;

  /* ——— Scale (4px base) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ——— Layout ——— */
  --container: 1200px;       /* spec  css/tokens.css:58 */
  --container-wide: 1320px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-pad: 160px;      /* desktop  css/tokens.css:61 */
  --section-pad-md: 112px;   /* tablet  css/tokens.css:62 */
  --section-pad-sm: 84px;    /* mobile  css/tokens.css:63 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-elastic: cubic-bezier(0.68,-0.35,0.27,1.15);
  --ease-smooth: cubic-bezier(0.25,0.1,0.25,1);
  --ease-emerge: cubic-bezier(0.22,1,0.36,1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --dur-ultra: 820ms;
  --dur-glacial: 1200ms;
  --stagger-sm: 60ms;
  --stagger: 90ms;
  --stagger-lg: 140ms;

  /* ——— Grain ——— */
  --grain-opacity: 0.08; /* NOT 0.18  css/tokens.css:79 */
}

/* Reduced container on very large screens */
@media (min-width: 1440px){
  :root{ --gutter: 48px; }
}
@media (max-width: 768px){
  :root{
    --section-pad: var(--section-pad-sm);
    --gutter: 20px;
  }
}
@media (min-width: 769px) and (max-width: 1024px){
  :root{ --section-pad: var(--section-pad-md); }
}

/* Dark scheme is same palette inverted intentionally NOT used; site is light editorial */