/* Hallmark · macrostructure: Narrative Workflow · theme: custom (silver CreaCo palette)
 * genre: editorial · tone: premium editorial · anchor hue: gold ~70°
 * paper: oklch(94.5% 0.004 240) silver-white · accent: oklch(69% 0.115 70) gold
 * display: Cormorant Garamond italic-serif · body: Schibsted Grotesk
 * axes: light / italic-serif / warm-gold
 */

:root {
  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Schibsted Grotesk', system-ui, sans-serif;
  --font-outlier:  'JetBrains Mono', 'Courier New', monospace;

  /* Scale — major third (1.25×), 16px base */
  --text-xs:        0.75rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-display-s: clamp(2rem, 3vw + 0.75rem, 3.5rem);
  --text-display:   clamp(2.75rem, 4.5vw + 1rem, 5rem);

  /* ── COLOUR — silver (OKLCH) ─────────────────────────────── */
  --color-paper:        oklch(94.5% 0.004 240);    /* cool silver-white  */
  --color-paper-2:      oklch(90.5% 0.006 240);    /* deeper silver      */
  --color-paper-3:      oklch(86%   0.008 240);    /* steel section      */
  --color-paper-glass:  oklch(94.5% 0.004 240 / 0.94);
  --color-rule:         oklch(79%   0.006 240);
  --color-faint:        oklch(85%   0.005 240);
  --color-muted:        oklch(52%   0.006 250);
  --color-ink-2:        oklch(34%   0.008 250);
  --color-ink:          oklch(16%   0.010 250);
  --color-accent:       oklch(69%   0.115 70);     /* gold ~#D4B76F       */
  --color-accent-dim:   oklch(69%   0.085 70);
  --color-accent-mid:   oklch(62%   0.135 68);
  --color-accent-bright:oklch(72%   0.130 72);
  --color-accent-glow:  oklch(69%   0.115 70 / 0.18);
  --color-accent-bg:    oklch(91%   0.018 80);
  --color-focus:        oklch(55%   0.19  55);
  /* Text-safe variants — darkened for WCAG AA (4.5:1) against paper/paper-2/paper-3.
     Decorative uses (borders, icon fills, backgrounds, glows) keep the brighter tokens above. */
  --color-accent-text:  oklch(47%   0.115 68);    /* accent gold, readable as text   */
  --color-muted-text:   oklch(46%   0.006 250);   /* muted gray, readable as text    */
  --color-faint-text:   oklch(50%   0.006 240);   /* faint/watermark, still 3:1+     */

  /* ── PURPLE (Phoenician secondary — #3E0847) ────────── */
  --color-purple:       oklch(20%   0.22  308);   /* #3E0847 exact brand primary  */
  --color-purple-mid:   oklch(38%   0.20  306);   /* #78527E — mid, readable on light */
  --color-purple-dim:   oklch(50%   0.17  304);   /* muted, for borders / UI chrome  */
  --color-purple-glow:  oklch(32%   0.24  308 / 0.14);
  --color-purple-bg:    oklch(93%   0.010 305);   /* #ECE6ED — section tint          */

  /* ── PALE GOLD (brand tertiary — #E9D792) ───────────── */
  --color-gold-pale:    oklch(89%   0.075 90);    /* #E9D792 — pale yellow-gold      */
  --color-gold-pale-bg: oklch(94%   0.042 88);    /* #F6EFD3 — section/badge tint    */
  --color-gold-pale-ink:oklch(40%   0.09  72);    /* dark gold text on pale bg       */

  /* ── BRAND FONT ───────────────────────────────────── */
  --font-brand: 'Exo 2', system-ui, sans-serif;

  /* ── SPACING (4pt base) ─────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── MOTION ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    500ms;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max: 1140px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);
  --prose-max:     66ch;
  --radius-sm:     3px;
  --radius-md:     8px;
  --radius-pill:   999px;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
}