:root {

  /* ── Backgrounds ──────────────────────────────────────────────────────────── */
  --color-bg-base:        #0a0905;   /* Near-black with warm undertone */
  --color-bg-surface:     #100f0a;   /* Cards, panels */
  --color-bg-elevated:    #1a1812;   /* Modals, dropdowns */
  --color-bg-inset:       #07060400; /* Recessed areas, input fields */

  /* ── Paper / Document tones ───────────────────────────────────────────────── */
  --color-paper:          #d4c99a;   /* Manila folder yellow */
  --color-paper-aged:     #b8aa7a;   /* Darker aged paper */
  --color-paper-dark:     #8a7d58;   /* Shadows on paper elements */

  /* ── Accents ──────────────────────────────────────────────────────────────── */
  --color-amber:          #c8922a;   /* Primary accent — stamps, highlights */
  --color-amber-bright:   #e8b84b;   /* Hover states, active links */
  --color-red:            #8b1a1a;   /* Redaction bars, danger, VIP badges */
  --color-red-bright:     #c0392b;   /* Alert states */
  --color-green-signal:   #2d5a27;   /* Broadcast live indicators */
  --color-green-bright:   #4caf50;   /* Online / active states */

  /* ── Text ─────────────────────────────────────────────────────────────────── */
  --color-text-primary:   #d4c99a;   /* Paper tone — main body text */
  --color-text-secondary: #9a8f6e;   /* Subdued, metadata */
  --color-text-muted:     #5a5240;   /* Disabled, placeholder */
  --color-text-inverse:   #0a0905;   /* Text on light surfaces */
  --color-text-heading:   #e8ddb8;   /* Slightly brighter for headings */

  /* ── Borders ──────────────────────────────────────────────────────────────── */
  --color-border:         #2a2518;   /* Subtle dividers */
  --color-border-paper:   #8a7d58;   /* Document-style borders */
  --color-border-accent:  #c8922a;   /* Highlighted borders */

  /* ── Tier badge colors ────────────────────────────────────────────────────── */
  --badge-free:           #2d5a27;   /* Green — FREE BROADCAST */
  --badge-member:         #c8922a;   /* Amber — CLASSIFIED */
  --badge-vip:            #8b1a1a;   /* Red — EYES ONLY */

  /* ── Font stacks ──────────────────────────────────────────────────────────── */
  --font-display: 'Special Elite', 'Courier New', monospace;     /* Typewriter, headlines */
  --font-body:    'IM Fell English', 'Georgia', serif;           /* Body copy, show notes */
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;   /* Data, metadata, codes */
  --font-ui:      'Special Elite', monospace;                    /* Nav, labels, UI chrome */

  /* ── Type scale ───────────────────────────────────────────────────────────── */
  --text-xs:   0.694rem;   /*  11px — stamps, fine print   */
  --text-sm:   0.833rem;   /*  13px — metadata, badges     */
  --text-base: 1rem;       /*  16px — body                 */
  --text-md:   1.2rem;     /*  19px — lead copy            */
  --text-lg:   1.44rem;    /*  23px — subheadings          */
  --text-xl:   1.728rem;   /*  28px — section headings     */
  --text-2xl:  2.074rem;   /*  33px — page headings        */
  --text-3xl:  2.488rem;   /*  40px — hero headings        */
  --text-4xl:  3.583rem;   /*  57px — display / masthead   */

  /* ── Spacing scale ────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;     /*   4px */
  --space-2:  0.5rem;      /*   8px */
  --space-3:  0.75rem;     /*  12px */
  --space-4:  1rem;        /*  16px */
  --space-5:  1.5rem;      /*  24px */
  --space-6:  2rem;        /*  32px */
  --space-7:  3rem;        /*  48px */
  --space-8:  4rem;        /*  64px */
  --space-9:  6rem;        /*  96px */
  --space-10: 8rem;        /* 128px */

  /* ── Layout ───────────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-max: 1440px;

  --gutter:    var(--space-6);   /* Page margin on mobile */
  --gutter-lg: var(--space-8);   /* Page margin on desktop */

  --sidebar-width: 280px;
  --content-width: 720px;

  /* ── Component states ─────────────────────────────────────────────────────── */
  --radius-sm: 2px;   /* Inputs, small elements — near-square for document feel */
  --radius-md: 3px;   /* Cards */
  --radius-lg: 4px;   /* Modals */

  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.8);
  --shadow-paper: 3px 3px 0 rgba(200, 146, 42, 0.15);   /* Document-on-desk shadow */

  --transition:      150ms ease;
  --transition-slow: 400ms ease;
}