/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Single source of truth
   All pages import this file for consistent styling
   ══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Color Tokens ───────────────────────────────────────────── */
:root {
  --bg: #0a0a0a;
  --surface: rgba(17,17,17,0.84);
  --surface2: #161616;
  --surface3: #1a1a1a;
  --sidebar-bg: #0c0c0c;

  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.10);

  --text: #e5e5e5;
  --text-dim: #888888;
  --text-faint: #555555;

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-glow: rgba(99,102,241,0.15);

  --green: #22c55e;
  --green-bg: rgba(34,197,94,0.1);
  --yellow: #eab308;
  --red: #ef4444;
  --red-bg: rgba(239,68,68,0.1);

  --mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Shadows — crisp contact + soft ambient */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 5px rgba(0,0,0,0.35), 0 14px 32px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  --sidebar-w: 220px;
  --topbar-h: 56px;
  --content-max-w: 1200px;

  --z-sidebar: 50;
  --z-topbar: 40;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ── Base Styles ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}