/* Design Tokens / CSS Custom Properties */
:root {
  color-scheme: dark;

  /* Color system - dark theme default */
  --color-primary: #e2e8f0;
  --color-secondary: #cbd5f5;
  --color-accent: #60a5fa;
  --color-accent-strong: #3b82f6;
  --color-text: #e2e8f0;
  --color-text-muted: #cbd5f5;
  --color-text-light: #94a3b8;
  --color-background: #0b1120;
  --color-background-alt: #111a2d;
  --color-surface: #16213b;
  --color-surface-alt: #1d2b4a;
  --color-hero-overlay: rgba(8, 15, 37, 0.85);
  --color-border: #27334e;
  --color-border-strong: #3b4d6d;

  /* Typography */
  --font-family-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-headings: 'Poppins', 'Inter', 'Segoe UI', sans-serif;
  --font-family-monospace: 'Fira Code', 'SFMono-Regular', Consolas, monospace;
  --font-size-base: 16px;
  --font-size-small: 0.875rem;
  --font-size-large: 1.125rem;
  --font-size-h1: clamp(2.75rem, 4vw, 3.5rem);
  --font-size-h2: clamp(2rem, 3vw, 2.5rem);
  --font-size-h3: clamp(1.35rem, 2vw, 1.75rem);
  --line-height-base: 1.75;
  --line-height-tight: 1.3;

  /* Spacing scale */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 5rem;

  /* Layout */
  --max-width: 1200px;
  --content-width: 980px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Effects */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s ease;
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-small: 0 12px 30px rgba(2, 6, 23, 0.45);
  --shadow-medium: 0 24px 55px rgba(2, 6, 23, 0.55);
  --shadow-large: 0 50px 110px rgba(2, 6, 23, 0.6);
  --glass-shadow: 0 34px 90px rgba(2, 6, 23, 0.55);

  /* Shapes */
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 28px;
  --radius-pill: 999px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-primary: #0f172a;
  --color-secondary: #1e293b;
  --color-accent: #2563eb;
  --color-accent-strong: #1d4ed8;
  --color-text: #1a202e;
  --color-text-muted: #2f3850;
  --color-text-light: #4a5164;
  --color-background: #f4f7fc;
  --color-background-alt: #e8eef9;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8ff;
  --color-hero-overlay: rgba(15, 23, 42, 0.72);
  --color-border: #ccd4e4;
  --color-border-strong: #b4bfd8;
  --shadow-small: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-medium: 0 18px 42px rgba(15, 23, 42, 0.12);
  --shadow-large: 0 40px 90px rgba(15, 23, 42, 0.18);
  --glass-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
}