/* Monarch Premium — design tokens (docs/design-brief.md §2). Do not change without the client. */

:root {
  --canvas:        #0B0B0C;                 /* page background; never #000 on surfaces */
  --canvas-2:      #121214;                 /* stage/plate fill behind media while loading */
  --ivory:         #F2EFE8;                 /* primary text */
  --ivory-90:      rgba(242,239,232,0.90);  /* body text */
  --ivory-60:      rgba(242,239,232,0.60);  /* pill border at rest */
  --ivory-08:      rgba(242,239,232,0.08);  /* pill hover fill, overlay scrim */
  --muted:         #8E8A82;                 /* secondary text, captions */
  --hairline:      rgba(242,239,232,0.14);  /* all rules, frames, dividers */
  --gold:          #C9A961;                 /* the single accent */
  --gold-hi:       #E4CF93;                 /* gold hover / active */
  --gold-deep:     #8F7434;                 /* gold at rest in very small sizes, gold hairlines */
  --gold-hairline: rgba(201,169,97,0.55);
  --media-black:   #000000;                 /* allowed only inside media containers */
  --shadow-tint:   rgba(11,11,12,0.6);      /* the only shadow colour; used for overlay gradients */
}

:root {
  /* spacing rhythm: 8px base, editorial (airy) density */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px;
  --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 160px; --s-10: 200px;
  --gutter: 48px;            /* desktop side gutter */
  --gutter-m: 16px;          /* mobile side gutter (<768px) */
  --container: 1400px;       /* max content width; full-bleed media ignores it */
  --section-y: var(--s-9);   /* desktop section padding top/bottom */
  --section-y-m: var(--s-7); /* mobile */
  --col-gap: 24px;           /* 12-column grid gap desktop */

  /* hairlines */
  --rule: 1px solid var(--hairline);
  --rule-gold: 1px solid var(--gold-hairline);

  /* radii: the page is square-cornered; the only radius is the pill */
  --r-0: 0;
  --r-pill: 9999px;

  /* easing */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast: 250ms; --dur: 400ms; --dur-slow: 700ms;
  /* GSAP equivalents: power3.out ≈ --ease-out, power2.inOut ≈ --ease-inout. No bounce, elastic, back or linear. */

  /* z-layers */
  --z-media: 0; --z-scrim: 1; --z-content: 2; --z-stage: 3;
  --z-nav: 30; --z-menu: 50; --z-cue: 20;
}

:root {
  /* type families (faces in css/fonts.css) */
  --f-display: "Zodiak", "Times New Roman", serif;
  --f-text:    "Switzer", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Fragment Mono", "SFMono-Regular", Menlo, monospace;

  /* type scale (brief §2.3) */
  --t-display: clamp(46px, 8.5vw, 120px);
  --t-h2:      clamp(38px, 5.5vw, 80px);
  --t-h3:      clamp(26px, 2.6vw, 40px);
  --t-numeral: clamp(48px, 5vw, 72px);
  --t-lead:    clamp(18px, 1.5vw, 21px);
}