/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Leo Vogel Portfolio
   Single source of truth for all CSS custom properties.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Color: Core Brand ────────────────────────────────── */
  --primary:        #019EDB;
  --primary-hover:  #0182B8;
  --primary-active: #016592;
  --primary-text:   #01506E;

  /* ── Color: Tonal Scale (primary) ────────────────────── */
  --color-primary-50:  #E6F6FD;
  --color-primary-100: #B3E3F8;
  --color-primary-200: #80D0F3;
  --color-primary-300: #4DBDEE;
  --color-primary-400: #34B6E8;
  --color-primary-500: #019EDB;
  --color-primary-600: #0182B8;
  --color-primary-700: #016592;
  --color-primary-800: #01506E;
  --color-primary-900: #003A50;
  --color-primary-950: #00243A;

  /* ── Color: Background & Surface ─────────────────────── */
  --bg:             #0E1A23;
  --surface:        #172633;
  --surface-raised: #273845;

  /* ── Color: Borders ──────────────────────────────────── */
  --border:         #3A4D5C;
  --border-bright:  #4E6374;

  /* ── Color: Text ─────────────────────────────────────── */
  --text:           #EDF1F4;
  --text-secondary: #8A9DAC;
  --text-muted:     #647D8E;

  /* ── Color: Glows ────────────────────────────────────── */
  --glow:           rgba(1, 158, 219, 0.15);
  --glow-strong:    rgba(1, 158, 219, 0.25);

  /* ── Color: Neutral Scale ────────────────────────────── */
  --neutral-50:  #EDF1F4;
  --neutral-100: #D4DCE3;
  --neutral-200: #B6C4CE;
  --neutral-300: #8A9DAC;
  --neutral-400: #647D8E;
  --neutral-500: #4E6374;
  --neutral-600: #3A4D5C;
  --neutral-700: #273845;
  --neutral-800: #172633;
  --neutral-900: #0E1A23;
  --neutral-950: #071019;

  /* ── Color: Semantic ─────────────────────────────────── */
  --color-success:  #4ADE80;
  --color-warning:  #FBBF24;
  --color-error:    #F87171;
  --color-info:     var(--primary);

  /* ── Typography: Font Families ───────────────────────── */
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── Typography: Scale ───────────────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* ── Typography: Weights ─────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* ── Spacing (4px grid) ──────────────────────────────── */
  --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;

  /* ── Layout ──────────────────────────────────────────── */
  --nav-h:   60px;
  --ruler-h: 20px;
  --content-max: 1200px;
  --prose-max: 65ch;
}