/* Design Tokens / Foundations */
:root {
  /* Palette Base */
  --color-bg: #0d1216;
  --color-bg-alt: #131d1f;
  --color-surface: #18242d;
  --color-surface-alt: #20323c;
  --color-overlay: rgba(10,15,18,0.75);
  --color-border: #273842;
  --color-border-alt: #344a55;
  --color-accent: #4ecdc4;
  --color-accent-soft: #3caea6;
  --color-accent-alt: #ff6b6b;
  --color-accent-warm: #ffe66d;
  --color-info: #3b82f6;
  --color-success: #3ddc97;
  --color-warning: #f6c453;
  --color-danger: #ef4444;
  --color-text: #e5f2f5;
  --color-text-alt: #c7d9e0;
  --color-text-dim: #8ca8b5;
  --color-text-faint: #5d7380;

  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-xxs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;

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

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px -1px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-md: 0 4px 10px -2px rgba(0,0,0,.55), 0 2px 4px -1px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 28px -6px rgba(0,0,0,.55), 0 4px 12px -2px rgba(0,0,0,.45);
  --shadow-glow-accent: 0 0 0 1px rgba(78,205,196,.5), 0 0 0 4px rgba(78,205,196,.08), 0 8px 20px -6px rgba(78,205,196,.25);

  /* Transitions */
  --ease-standard: cubic-bezier(.4, .14, .3, 1);
  --ease-emph: cubic-bezier(.5, 0, .2, 1);
  --transition-fast: 120ms var(--ease-standard);
  --transition-med: 220ms var(--ease-standard);

  /* Layout max widths */
  --layout-max: 1240px;
  --layout-text: 820px;
}

/* Base Reset / Normalize Light */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  background: radial-gradient(circle at 25% 15%, #16212a 0%, #0d1216 60%) fixed;
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display:block; }
svg { shape-rendering: geometricPrecision; }

::selection { background: var(--color-accent); color:#062b28; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0e171c; }
::-webkit-scrollbar-thumb { background: #23343d; border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: #2f4652; }

/* Utility Classes */
.container { width:100%; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--space-5); }
.text-dim { color: var(--color-text-dim); }
.text-faint { color: var(--color-text-faint); }
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.center { align-items:center; justify-content:center; }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-8 { margin-bottom: var(--space-8); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.pt-12 { padding-top: var(--space-12); }
.pb-12 { padding-bottom: var(--space-12); }
.fade-in { animation: fadeIn .6s var(--ease-standard); }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }