/* ═══════════════════════════════════════════════════════════════
   NIGHTFALL EXPRESS — Design Tokens (Single Source of Truth)
   All colors, spacing, typography, z-index, breakpoints defined here.
   Never define a color, spacing unit, or z-index outside this file.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Colors ─────────────────────────────────────────────────── */
  --color-bg-primary:    #0a0a0c;
  --color-bg-secondary:  #111114;
  --color-bg-card:       #141418;
  --color-bg-nav:        rgba(10, 10, 12, 0.92);

  --color-amber:         #e07b2a;
  --color-amber-light:   #f5a623;
  --color-amber-dim:     rgba(224, 123, 42, 0.15);
  --color-amber-border:  rgba(224, 123, 42, 0.4);

  --color-steel:         #7090b0;
  --color-steel-light:   #8fa3b1;
  --color-steel-dim:     rgba(112, 144, 176, 0.08);
  --color-steel-border:  rgba(112, 144, 176, 0.12);

  --color-text-primary:  #f0ede8;
  --color-text-secondary:#c8c4bc;
  --color-text-muted:    #6e6d6a;

  --color-border:        rgba(168, 160, 140, 0.1);
  --color-border-strong: rgba(168, 160, 140, 0.2);

  --color-white:         #ffffff;
  --color-black:         #000000;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-display:  'Himagsikan', 'Oswald', sans-serif; /* hero title + stat numbers */
  --font-heading:  'Oswald', sans-serif;
  --font-body:     'Crimson Pro', serif;

  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  3rem;
  --text-4xl:  4.5rem;
  --text-5xl:  6rem;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-pad:  var(--space-xl);
  --nav-height:     80px;
  --section-pad:    var(--space-4xl);
  --radius-sm:      3px;
  --radius-md:      6px;
  --radius-lg:      12px;

  /* ── Z-Index Scale (never use magic numbers) ─────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   1000;
  --z-toast:   9999;

  /* ── Transitions ─────────────────────────────────────────────── */
  --ease-fast:    0.15s ease;
  --ease-default: 0.25s ease;
  --ease-slow:    0.4s ease;
  --ease-bounce:  0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Breakpoints (use in media queries as reference) ─────────── */
  /* mobile:  < 640px  */
  /* tablet:  640px–1024px */
  /* desktop: > 1024px */
}