/* ==========================================================================
   IC7 Game — Design Tokens
   "Crimson Circuit" theme. Single source of truth for colour, type, space.
   ========================================================================== */

:root {
  /* --- Core palette ----------------------------------------------------- */
  --color-bg:            #0A0A0C;
  --color-bg-alt:        #101013;
  --color-surface:       #17171B;
  --color-surface-2:     #1F1F24;
  --color-border:        #2B2B31;
  --color-border-light:  #3A3A42;

  /* --- Red accent system ------------------------------------------------ */
  --color-accent:        #E10600;
  --color-accent-bright: #FF1A1A;
  --color-accent-dim:    #A30400;
  --color-accent-glow:   rgba(225, 6, 0, 0.35);
  --color-accent-wash:   rgba(225, 6, 0, 0.08);

  /* --- Text ------------------------------------------------------------- */
  --color-text-primary:   #F5F5F7;
  --color-text-secondary: #B5B5BC;
  --color-text-muted:     #6E6E76;

  /* --- Status ----------------------------------------------------------- */
  --color-success: #14D67C;
  --color-error:   #FF3B3B;
  --color-warning: #FFB020;

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  3rem;      /* 48px */
  --fs-4xl:  4rem;      /* 64px */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.7;
  --lh-loose: 1.85;

  /* --- Shadows / glow --------------------------------------------------- */
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-card-lg:     0 12px 48px rgba(0, 0, 0, 0.65);
  --shadow-glow:        0 0 24px var(--color-accent-glow);
  --shadow-glow-strong: 0 0 48px rgba(225, 6, 0, 0.55);

  /* --- Radius (4px base scale) ------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Spacing (4px base scale) ----------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1240px;
  --container-pad: var(--space-5);
  --header-h: 68px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* --- Z-index ---------------------------------------------------------- */
  --z-bg:    0;
  --z-base:  1;
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-8);
    --header-h: 76px;
  }
}