/* === Design Tokens === */
:root {
  /* ── Colors ── */
  --bg-primary:     #0D0D0D;
  --bg-secondary:   #111111;
  --bg-card:        #1A1A1A;
  --bg-terminal:    #0A0A0A;

  --text-primary:   #F5F5F5;
  --text-secondary: #AAAAAA;
  --text-muted:     #666666;

  --accent-green:   #39FF14;
  --accent-yellow:  #FFD500;
  --accent-red:     #FF3B3B;
  --accent-blue:    #00D9FF;

  --border-color:   #F5F5F5;
  --border-dark:    #000000;

  /* ── Typography ── */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Cascadia Code', monospace;
  --fs-xs:    0.7rem;
  --fs-sm:    0.8rem;
  --fs-base:  0.95rem;
  --fs-md:    1.1rem;
  --fs-lg:    1.4rem;
  --fs-xl:    1.8rem;
  --fs-2xl:   2.4rem;
  --fs-hero:  2.8rem;

  /* ── Borders ── */
  --border-width: 3px;
  --border:       var(--border-width) solid var(--border-color);
  --border-dark:  var(--border-width) solid #000;
  --radius:       2px;

  /* ── Shadows ── */
  --shadow-default:   6px 6px 0px #000;
  --shadow-hover:     2px 2px 0px #000;
  --shadow-accent:    6px 6px 0px var(--accent-green);

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

  /* ── Layout ── */
  --max-width:  1100px;
  --nav-height: 56px;

  /* ── Transitions ── */
  --ease-default: 150ms cubic-bezier(0.2, 0, 0.2, 1);
  --ease-bounce:  200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Mobile Overrides ── */
@media (max-width: 768px) {
  :root {
    --fs-hero:  1.8rem;
    --fs-2xl:   1.6rem;
    --fs-xl:    1.3rem;
    --fs-lg:    1.1rem;
    --border-width: 2px;
    --shadow-default: 4px 4px 0px #000;
    --shadow-hover:   2px 2px 0px #000;
    --nav-height: 48px;
  }
}