/* ==========================================================================
   Lyceum Design Tokens
   Source of truth: plans/factory-ui-designer.md FR-1 + FR-2
   Also: plans/world-class-brand-identity-designer.md FR-3 + FR-4
   Mockup reference: designs/html/design-tokens.css

   Color system: 6 brand primitives + 3 derived = 9 total.
   Semantic role tokens (page-bg, text, surface-warm, accent, footer-bg, rule)
   are the public API consumed by components. Primitives are consumed inside
   this file and in rare named surfaces only.
   ========================================================================== */

:root {
  /* ---- Brand Primitives (6) ---- */
  --color-black:          #040503;
  --color-white:          #FFFFFF;
  --color-claret:         #7D1138;
  --color-shuttle-gray:   #525E65;
  --color-satin-linen:    #E5DFD1;  /* hex corrected per REQ-2 */
  --color-quarter-white:  #F7F3E3;

  /* ---- Derived (3) ---- */
  --color-shuttle-gray-soft: #95A0A6;  /* 60% shuttle-gray + 40% quarter-white */
  --color-claret-hover:      #6A0E2F;  /* 85% claret + 15% black */
  --color-rule:              var(--color-satin-linen);  /* horizontal rules, borders */
  --color-rule-strong:       rgba(4,5,3,0.15);         /* strong rule/divider variant (REQ-2) */
  --color-overlay-dark:      rgba(4,5,3,0.7);          /* overlay/scrim variant (REQ-2) */
  --color-selection:         var(--color-satin-linen); /* Pass-4 alias for ::selection rule (REQ-003 / F-02). Available for future per-section overrides. */

  /* ---- Semantic Role Tokens (Phase 3 dark-mode-ready) ---- */
  --color-page-bg:       var(--color-quarter-white);  /* body background */
  --color-text:          var(--color-black);          /* default body text */
  --color-text-muted:    var(--color-shuttle-gray);   /* captions, meta, bylines */
  --color-text-disabled: var(--color-shuttle-gray-soft);
  --color-surface-warm:  var(--color-satin-linen);    /* tile, banner, matte */
  --color-accent:        var(--color-claret);         /* CTAs, focus rings, links */
  --color-accent-hover:  var(--color-claret-hover);
  --color-footer-bg:     var(--color-black);          /* footer ground */

  /* ---- Typography: Font Families ----
     Canonical font-family tokens are declared in _typography.css alongside the
     @font-face rules (--font-display, --font-body-serif, --font-ui,
     --font-eyebrow). Legacy aliases (arcuata/signifier/decimal/archivo) were
     retired per LYC-128 / REQ-7. */

  /* ---- Typography: Sizes ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 72px;
  --text-9xl: 128px;

  /* ---- Typography: Line Heights ---- */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;

  /* ---- Layout ---- */
  --viewport-width: 1440px;
  --content-width: 1380px;
  --content-margin: 30px;
  --mobile-viewport: 375px;
  --mobile-content: 330px;
  --mobile-margin: 22.5px;

  /* ---- Spacing ---- */
  --section-gap: 120px;
  --section-gap-mobile: 38px;
  --card-gap: 30px;
  --component-gap: 44px;

  /* ---- Components ---- */
  --btn-height: 44px;
  --btn-radius: 10px;
  --btn-border: 0.5px;
  --tag-radius: 4px;
  --card-image-height: 360px;
  --card-width: 300px;

  /* ---- Spacing scale (4px grid). Mirrors designs/html/design-tokens.css. ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Container widths + gutter (article-focused layout primitives) ---- */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-article: 720px;
  --gutter: clamp(16px, 3vw, 40px);

  /* ---- Rule + border widths ---- */
  --rule-width: 1px;
  --rule-thick: 2px;
}

/* Phase 3 dark-mode override. Stubbed, not active.
@media (prefers-color-scheme: dark) {
  :root {
    --color-page-bg:       var(--color-black);
    --color-text:          var(--color-quarter-white);
    --color-text-muted:    var(--color-shuttle-gray-soft);
    --color-text-disabled: var(--color-shuttle-gray);
    --color-surface-warm:  var(--color-shuttle-gray);
    --color-accent:        var(--color-claret);
    --color-accent-hover:  var(--color-claret-hover);
    --color-footer-bg:     var(--color-black);
    --color-rule:          var(--color-shuttle-gray);
  }
}
*/