/* =============================================================
   FORGE/CTRL — Design tokens (mobile-first)
   ============================================================= */

:root {
  /* ---------- Colors ---------- */
  --bg:        #000000;
  --surface:   #0c0c0c;
  --surface-2: #141414;
  --surface-3: #1a1a1a;
  --border:    #1f1f1f;
  --border-hi: #2e2e2e;

  --text:      #fafafa;
  --text-dim:  #8a8a8a;
  --text-mute: #5a5a5a;

  --accent-lime:    #c5ff00;
  --accent-lime-hi: #d4ff44;
  --accent-sky:     #5fd6ff;
  --accent-warn:    #ffb000;
  --accent-danger:  #ff3b3b;
  --accent-rest:    #5a5a5a;

  /* Soft tints */
  --tint-lime-bg:   rgba(197, 255, 0, 0.08);
  --tint-lime-bg-2: rgba(197, 255, 0, 0.14);
  --tint-sky-bg:    rgba(95, 214, 255, 0.08);
  --tint-warn-bg:   rgba(255, 176, 0, 0.08);
  --tint-danger-bg: rgba(255, 59, 59, 0.05);
  --tint-danger-border: #3a1818;

  /* ---------- Typography ---------- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Mobile-first type scale (these grow up via media queries on specific elements). */
  --fs-display-2xl: 56px;
  --fs-display-xl:  44px;
  --fs-display-lg:  36px;
  --fs-display-md:  28px;
  --fs-display-sm:  22px;
  --fs-display-xs:  18px;

  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-body-sm: 13px;
  --fs-body-xs: 12px;

  --fs-mono-md: 13px;
  --fs-mono-sm: 12px;
  --fs-mono-xs: 11px;
  --fs-mono-xxs: 10px;
  --fs-mono-tiny: 9px;

  /* ---------- Spacing ---------- */
  --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;

  /* ---------- Touch targets ---------- */
  --touch-min: 44px;

  /* ---------- Layout ---------- */
  --max-w-sm:  448px;
  --max-w-md:  768px;
  --max-w-lg:  1024px;
  --max-w-xl:  1280px;

  /* ---------- Effects ---------- */
  --transition-fast: 0.15s ease;
  --transition:      0.25s ease;

  color-scheme: dark;
}

/* Tablet+ scaling: type gets a touch larger. */
@media (min-width: 768px) {
  :root {
    --fs-display-2xl: 96px;
    --fs-display-xl:  72px;
    --fs-display-lg:  56px;
    --fs-display-md:  40px;
  }
}

/* Desktop scaling. */
@media (min-width: 1024px) {
  :root {
    --fs-display-2xl: 128px;
  }
}