/* ─── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:          rgba(15, 15, 15, 0.78);
  --color-bg-panel:    #1a1a1a;
  --color-bg-card:     #111111;
  --color-bg-elevated: #1e1e1e;
  --color-border:      rgba(255, 255, 255, 0.1);
  --color-border-soft: rgba(255, 255, 255, 0.06);

  --color-text:        #b4b4b4;
  --color-heading:     #ffffff;
  --color-muted:       #6b6b6b;
  --color-label:       #888888;

  --color-green:       #22c55e;
  --color-green-bg:    rgba(34, 197, 94, 0.12);
  --color-red:         #ef4444;
  --color-red-bg:      rgba(239, 68, 68, 0.12);
  --color-yellow:      #f59e0b;
  --color-yellow-bg:   rgba(245, 158, 11, 0.12);
  --color-accent:      #ffffff;

  /* Typography */
  --font-primary:      'IBM Plex Sans', Arial, sans-serif;
  --font-mono:         'Source Code Pro', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-h1:    3.75rem;   /* 60px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.06em;

  /* Spacing */
  --space-0:    0;
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* Layout */
  --container:      80.375rem;  /* 1286px */
  --container-lg:   90rem;
  --section-py:     5rem;
  --header-h:       4.5rem;

  /* Borders */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-panel: 0 4px 24px rgba(0,0,0,0.5);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;
}