/* ============================================================
   LGFL Design System — Token Source of Truth
   Version: D-system (Dark Tobacco) — May 2026
   DO NOT define colour, spacing, or motion values anywhere else.
   All per-page <style> blocks and component CSS must reference
   these variables only. Direct hex is forbidden post-migration.

   Exception — SVG presentation attributes (fill=, stroke=, stop-color=):
   CSS variables do not resolve in SVG attribute context.
   Raw palette hex is permitted ONLY in fill=/stroke=/stop-color=
   attributes on inline SVG elements. Use the D-system palette
   values defined below.
   In all CSS contexts (including SVG inside <style>) use var() only.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:           #2E2922;
  --surface:      #38302A;
  --surface-2:    #423830;
  --surface-deep: #251E18;

  /* Text */
  --cream:        #F3F0E8;
  --cream-2:      #C0BCB0;
  --muted:        #7A7770;
  --deep:         #635F58;
  --micro:        #4A4740;

  /* Gold */
  --gold:         #96885A;
  --gold-lt:      #B3A778;
  --gold-dk:      #6B5F3E;

  /* State */
  --red:          #C44A3A;
  --green:        #22C55E;

  /* Borders (gold-tinted alpha) */
  --bd-strong:    rgba(150,136,90,0.32);
  --bd:           rgba(150,136,90,0.20);
  --bd-soft:      rgba(150,136,90,0.16);
  --bd-subtle:    rgba(150,136,90,0.10);
  --bd-cream:     rgba(243,240,232,0.09);

  /* Glass / overlay backgrounds — for fixed translucent surfaces */
  --bg-glass:      rgba(46,41,34,0.97);
  --bg-glass-soft: rgba(46,41,34,0.96);

  /* Typography */
  --font-sans:    'Syne', system-ui, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --header-h:     52px;
  --max-wide:     1200px;
  --max-content:  960px;
  --gutter:       40px;

  /* Motion */
  --t-fast:       0.15s ease;
  --t-std:        0.20s ease;
  --t-med:        0.25s ease;
  --t-slow:       0.30s ease;
}

@media (max-width: 768px) {
  :root {
    --header-h: 44px;
    --gutter:   22px;
  }
}