/* =============================================================================
   variables.css — Design tokens for the dark neon theme.
   Single source of truth for color, spacing, typography, radius, shadow.
   All values WCAG-AA checked: body text #c8d2e0 on #0a0e16 ~= 13:1 contrast.
   ============================================================================= */

:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #0a0e16;
  --color-bg-elevated: #111726;
  --color-surface: #161d2e;
  --color-surface-hover: #1d2740;
  --color-border: #26314d;
  --color-border-strong: #38456b;

  /* ---- Color: text ---- */
  --color-text: #e6ecf5;
  --color-text-muted: #9aa7bd;
  --color-text-faint: #6b788f;

  /* ---- Color: neon accents ---- */
  --color-accent: #22d3ee; /* cyan */
  --color-accent-strong: #06b6d4;
  --color-accent-2: #34d399; /* green */
  --color-accent-glow: rgba(34, 211, 238, 0.35);

  /* ---- Color: status ---- */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-success-bg: rgba(52, 211, 153, 0.12);
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-info-bg: rgba(34, 211, 238, 0.12);

  /* ---- Typography ---- */
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: clamp(2.25rem, 6vw, 3.75rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale (rem-based) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* ---- Shadow / glow ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 0 0 1px var(--color-accent-glow), 0 8px 30px var(--color-accent-glow);

  /* ---- Layout ---- */
  --container-max: 75rem; /* 1200px */
  --container-narrow: 48rem; /* 768px */
  --header-height: 4rem;

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-banner: 200;
  --z-modal: 300;
}