/* ============================================================
   variables.css
   Design tokens — single source of truth for the aesthetic.
   Change values here to re-theme the whole site.
   ============================================================ */

:root {
  /* ── COLORS ── */
  --color-bg:        #0a0806;
  --color-bg-soft:   #14100c;
  --color-fg:        #e8d7a8;   /* warm bone — default text */
  --color-fg-dim:    #8a7a5c;   /* secondary / metadata */
  --color-amber:     #f4b73d;   /* primary accent */
  --color-amber-hot: #ffd36b;   /* highlight amber */
  --color-cyan:      #6bd3c7;   /* secondary accent */
  --color-magenta:   #c84b6b;   /* tertiary accent */
  --color-green:     #8fb55b;   /* reserved — success states */
  --color-rule:      #2a2218;   /* borders, dividers */

  /* ── EFFECTS ── */
  --glow-amber: 0 0 6px rgba(244, 183, 61, 0.35);

  /* ── TYPOGRAPHY ── */
  --font-display: 'VT323', ui-monospace, monospace;
  --font-body:    'JetBrains Mono', ui-monospace, monospace;

  --fs-base:  15px;
  --fs-small: 11px;
  --fs-meta:  13px;

  /* ── LAYOUT ── */
  --max-width:        920px;
  --pad-x-desktop:    32px;
  --pad-y-desktop:    48px;
  --pad-x-mobile:     18px;
  --pad-y-mobile:     24px;

  --space-xs:  6px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  40px;
  --space-xl:  64px;
}