/* ==========================================================================
   MERIDIAN — Design Tokens
   Verbatim from architecture blueprint §6.0. Single source of truth.
   Do not hardcode any color/space/type value elsewhere — reference these.
   ========================================================================== */

:root {
  /* --- Color: obsidian / editorial white / muted gold ------------------- */
  --obsidian-900: #0A0A0C;   /* page bg, dark sections, admin shell        */
  --obsidian-800: #121216;   /* cards / panels on dark                     */
  --ivory:        #F4F1E9;   /* text on dark (body 72%, headings 100%)     */
  --paper:        #FBFAF6;   /* editorial light sections — warm white      */
  --ink:          #17161A;   /* text on light                             */
  --gold:         #AE8A50;   /* accents, rules, primary CTA. NEVER body.  */
  --gold-dim:     rgba(174,138,80,.35); /* hairlines / rules on dark       */
  --platinum:     #C8CBD0;   /* secondary accent; data/mono in dashboard   */
  --line-light:   #E7E2D6;   /* hairlines on paper                         */
  --ok:   #7BA98A;           /* status chips only — muted, never saturated */
  --warn: #C9A85C;
  --fail: #B0645C;

  /* Semantic aliases */
  --bg:        var(--obsidian-900);
  --bg-panel:  var(--obsidian-800);
  --text:      rgba(244,241,233,.72);   /* ivory @ 72% body on dark        */
  --heading:   var(--ivory);
  --rule:      var(--gold-dim);

  /* --- Type ------------------------------------------------------------- */
  /* Self-host these in /fonts (Phase 1 uses fallbacks; see @font-face TODO)*/
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --body-size: 17px;
  --body-line: 1.7;
  --measure:   68ch;         /* capped line length                        */

  /* Modular scale — 12.5 / 14 / 17 / 22 / 28 / 40 / 56 / 84 */
  --t-xs:  12.5px;
  --t-sm:  14px;
  --t-md:  17px;
  --t-lg:  22px;
  --t-xl:  28px;
  --t-2xl: 40px;
  --t-3xl: 56px;
  --t-4xl: 84px;
  --t-hero: clamp(56px, 7vw, 128px);   /* commands 4K, survives a phone   */

  /* Labels: 11–12px, uppercase, letter-spacing .14em, gold or 60% ink */
  --label-size: 11.5px;
  --label-track: .14em;

  /* --- Layout ----------------------------------------------------------- */
  --grid-cols: 12;
  --gutter: 24px;
  --content-max: 1560px;               /* centered; negative space = feature */
  --page-margin: clamp(24px, 6vw, 120px);
  --section-pad: 160px;                /* desktop */
  --section-pad-mobile: 72px;
  --radius: 2px;                       /* institutional, near-square        */

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;                        /* fade-and-rise on first reveal only */
}

/* Breakpoints (reference — used in media queries): 480 · 768 · 1024 · 1440 · 1920+ */

/* --- Self-hosted fonts -----------------------------------------------------
   TODO Phase 1: drop WOFF2 files in /fonts and enable. Self-host only —
   NO Google Fonts (zero third-party requests is a hard constraint).
   @font-face { font-family:"Fraunces"; src:url(/fonts/Fraunces-var.woff2) format("woff2-variations");
                font-weight:300 500; font-style:normal; font-display:swap; }
   @font-face { font-family:"Inter"; src:url(/fonts/Inter-var.woff2) format("woff2-variations");
                font-weight:400 500; font-display:swap; }
   @font-face { font-family:"IBM Plex Mono"; src:url(/fonts/IBMPlexMono-Regular.woff2) format("woff2");
                font-weight:400; font-display:swap; }
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}
