/* ============================================================
   Design tokens — single source of truth for the visual system.
   Section 4.2–4.6 of TZ.md.
   ============================================================ */

:root {
  /* ---------- Colors: Backgrounds ---------- */
  --color-bg-deep:       #08160e;   /* darkest, body */
  --color-bg-primary:    #0d2818;   /* main green */
  --color-bg-secondary:  #143726;   /* cards */
  --color-bg-elevated:   #1d4a34;   /* hover, modal */
  --color-felt:          #0a1f12;   /* felt texture */

  /* ---------- Colors: Gold (accent) ---------- */
  --color-gold:          #d4af37;
  --color-gold-light:    #f0cf65;
  --color-gold-dark:     #a8881f;
  --color-gold-soft:     rgba(212, 175, 55, 0.15);

  /* ---------- Colors: Red (CTA) ---------- */
  --color-red:           #c8102e;
  --color-red-light:     #e5314a;
  --color-red-dark:      #8b0a1f;

  /* ---------- Colors: Text ---------- */
  --color-text-primary:  #f5f0e1;   /* creamy white */
  --color-text-secondary:#c4b896;
  --color-text-muted:    #7a7060;
  --color-text-inverse:  #0d2818;   /* for use on light bg */

  /* ---------- Colors: Utility ---------- */
  --color-border:        #2a5040;
  --color-divider:       rgba(212, 175, 55, 0.2);
  --color-success:       #2ecc71;
  --color-error:         #e74c3c;
  --color-warning:       #f39c12;
  --color-info:          #3498db;

  /* ---------- Effects: Shadows ---------- */
  --shadow-sm:    0 2px 4px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-gold:  0 0 24px rgba(212, 175, 55, 0.3);
  --shadow-red:   0 4px 16px rgba(200, 16, 46, 0.4);

  /* ---------- Typography: Families (4.3) ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Typography: Scale (4.3) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* ---------- Typography: Weights ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---------- Spacing (4.4) ---------- */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;

  /* ---------- Radii (4.5) ---------- */
  --radius-4:    4px;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-24:   24px;
  --radius-pill: 9999px;

  /* ---------- Breakpoints (reference values, 4.6) ---------- */
  --bp-md: 640px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}