:root {
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --text-caption: 12px;
  --text-label: 14px;
  --text-body: 16px;
  --text-body-lg: 20px;
  --text-h3: 24px;
  --text-h2: 32px;
  --text-h1: 44px;
  --text-display: 56px;

  --text-xs: var(--text-caption);
  --text-sm: var(--text-label);
  --text-base: var(--text-body);
  --text-lg: var(--text-body-lg);
  --text-xl: var(--text-h3);
  --text-2xl: var(--text-h2);
  --text-3xl: 40px;
  --text-4xl: var(--text-display);

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  --s1: var(--space-2);
  --s2: var(--space-4);
  --s3: var(--space-6);
  --s4: var(--space-7);
  --s5: var(--space-8);
  --s6: var(--space-9);
  --s7: var(--space-10);
  --s8: var(--space-11);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --section-pad: 96px;

  --neutral-0: #f8fafc;
  --neutral-1: #f1f5f9;
  --neutral-2: #e2e8f0;
  --neutral-3: #cbd5e1;
  --neutral-4: #94a3b8;
  --neutral-5: #64748b;
  --neutral-6: #475569;
  --neutral-7: #334155;
  --neutral-8: #1e293b;
  --neutral-9: #0f172a;
  --neutral-10: #020617;

  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-400: #4f8cff;
  --primary-300: #76a7ff;
  --secondary-500: #d97706;
  --secondary-400: #f4b740;
  --info-500: #0ea5e9;
  --info-400: #38bdf8;
  --success-600: #16a34a;
  --success-500: #22c55e;
  --warning-600: #d97706;
  --warning-500: #fbbf24;
  --error-600: #dc2626;
  --error-500: #f87171;
  --telegram-500: #2ca5e0;
  --telegram-600: #0275b5;

  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 28px 60px rgba(15, 23, 42, 0.12);

  --t: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

html:not([data-theme]),
html[data-theme="dark"] {
  --color-bg: #0b1020;
  --color-canvas: #11182d;
  --color-surface: #17213a;
  --color-surface-muted: #1c2745;
  --color-surface-elevated: #233153;
  --color-text: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-border: #283654;
  --color-border-strong: #34456a;
  --color-border-accent: rgba(79, 140, 255, 0.32);
  --color-primary: var(--primary-400);
  --color-primary-hover: var(--primary-300);
  --color-primary-soft: rgba(79, 140, 255, 0.14);
  --color-primary-soft-strong: rgba(79, 140, 255, 0.22);
  --color-secondary: var(--secondary-400);
  --color-secondary-hover: #ffd074;
  --color-secondary-soft: rgba(244, 183, 64, 0.16);
  --color-secondary-soft-strong: rgba(244, 183, 64, 0.28);
  --color-success: var(--success-500);
  --color-success-soft: rgba(34, 197, 94, 0.14);
  --color-success-border: rgba(34, 197, 94, 0.3);
  --color-warning: var(--warning-500);
  --color-warning-soft: rgba(251, 191, 36, 0.16);
  --color-warning-border: rgba(251, 191, 36, 0.3);
  --color-error: var(--error-500);
  --color-error-soft: rgba(248, 113, 113, 0.14);
  --color-error-border: rgba(248, 113, 113, 0.32);
  --color-info: var(--info-400);
  --color-info-soft: rgba(56, 189, 248, 0.14);
  --color-info-border: rgba(56, 189, 248, 0.32);
  --color-brand: var(--telegram-500);
  --color-brand-hover: #46b4ee;
  --color-brand-soft: rgba(44, 165, 224, 0.18);
  --color-brand-border: rgba(44, 165, 224, 0.34);
  --header-bg: rgba(11, 16, 32, 0.82);
  --header-bg-solid: rgba(11, 16, 32, 0.96);
  --header-border: rgba(148, 163, 184, 0.12);
  --nav-hover-bg: rgba(148, 163, 184, 0.1);
  --surface-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
  --hero-background: linear-gradient(160deg, rgba(11, 16, 32, 0.98) 0%, rgba(17, 24, 45, 0.96) 48%, rgba(12, 18, 34, 0.98) 100%);
  --hero-orb-primary: rgba(79, 140, 255, 0.18);
  --hero-orb-secondary: rgba(244, 183, 64, 0.12);
  --overlay-scrim: rgba(2, 6, 23, 0.82);
  --overlay-scrim-strong: rgba(2, 6, 23, 0.9);
  --focus-ring: rgba(79, 140, 255, 0.32);
  --selection-bg: rgba(79, 140, 255, 0.28);
  --selection-text: var(--color-text);
  --card-shadow: 0 18px 40px rgba(2, 6, 23, 0.24);
  --card-shadow-hover: 0 24px 52px rgba(2, 6, 23, 0.34);
  --accent-glow: rgba(79, 140, 255, 0.22);
  --gold-glow: rgba(244, 183, 64, 0.24);
  --color-error-ring: rgba(248, 113, 113, 0.14);
  --color-success-ring: rgba(34, 197, 94, 0.12);
  --color-brand-shadow: rgba(44, 165, 224, 0.28);
  --color-brand-shadow-strong: rgba(44, 165, 224, 0.36);
  --skeleton-shimmer: rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] {
  --color-bg: #f5f7fb;
  --color-canvas: #ffffff;
  --color-surface: #eef2f7;
  --color-surface-muted: #e2e8f0;
  --color-surface-elevated: #ffffff;
  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;
  --color-border: #d9e2ec;
  --color-border-strong: #c5d1e0;
  --color-border-accent: rgba(37, 99, 235, 0.24);
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-soft: rgba(37, 99, 235, 0.08);
  --color-primary-soft-strong: rgba(37, 99, 235, 0.16);
  --color-secondary: var(--secondary-500);
  --color-secondary-hover: #b25f05;
  --color-secondary-soft: rgba(217, 119, 6, 0.1);
  --color-secondary-soft-strong: rgba(217, 119, 6, 0.18);
  --color-success: var(--success-600);
  --color-success-soft: rgba(22, 163, 74, 0.1);
  --color-success-border: rgba(22, 163, 74, 0.18);
  --color-warning: var(--warning-600);
  --color-warning-soft: rgba(217, 119, 6, 0.1);
  --color-warning-border: rgba(217, 119, 6, 0.18);
  --color-error: var(--error-600);
  --color-error-soft: rgba(220, 38, 38, 0.08);
  --color-error-border: rgba(220, 38, 38, 0.16);
  --color-info: var(--info-500);
  --color-info-soft: rgba(14, 165, 233, 0.08);
  --color-info-border: rgba(14, 165, 233, 0.18);
  --color-brand: var(--telegram-500);
  --color-brand-hover: var(--telegram-600);
  --color-brand-soft: rgba(44, 165, 224, 0.12);
  --color-brand-border: rgba(44, 165, 224, 0.18);
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-bg-solid: rgba(255, 255, 255, 0.95);
  --header-border: rgba(15, 23, 42, 0.08);
  --nav-hover-bg: rgba(37, 99, 235, 0.06);
  --surface-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.42) 100%);
  --hero-background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 247, 251, 0.96) 100%);
  --hero-orb-primary: rgba(37, 99, 235, 0.1);
  --hero-orb-secondary: rgba(217, 119, 6, 0.08);
  --overlay-scrim: rgba(15, 23, 42, 0.48);
  --overlay-scrim-strong: rgba(15, 23, 42, 0.72);
  --focus-ring: rgba(37, 99, 235, 0.24);
  --selection-bg: rgba(37, 99, 235, 0.18);
  --selection-text: var(--color-text);
  --card-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  --card-shadow-hover: 0 22px 44px rgba(15, 23, 42, 0.12);
  --accent-glow: rgba(37, 99, 235, 0.18);
  --gold-glow: rgba(217, 119, 6, 0.18);
  --color-error-ring: rgba(220, 38, 38, 0.12);
  --color-success-ring: rgba(22, 163, 74, 0.1);
  --color-brand-shadow: rgba(44, 165, 224, 0.24);
  --color-brand-shadow-strong: rgba(44, 165, 224, 0.32);
  --skeleton-shimmer: rgba(255, 255, 255, 0.48);
}

html {
  color-scheme: dark;
}

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

html::selection,
body::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

:root {
  --bg: var(--color-bg);
  --surface: var(--color-canvas);
  --surface-2: var(--color-surface);
  --surface-3: var(--color-surface-muted);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-hover);
  --gold: var(--color-secondary);
  --gold-dark: var(--color-secondary-hover);
  --text: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-accent: var(--color-border-accent);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --color-accent: var(--color-primary);
  --color-secondary-dark: var(--color-secondary-hover);
  --color-white: var(--color-text-inverse);
  --color-bg-light: var(--color-surface);
  --color-bg-surface: var(--color-surface-muted);
  --color-text-light: var(--color-text-muted);
  --color-footer-text: var(--color-text-secondary);
  --color-footer-text-muted: var(--color-text-muted);
  --color-footer-text-dim: var(--color-text-muted);
  --glow-accent: 0 0 24px var(--accent-glow);
  --glow-gold: 0 0 24px var(--gold-glow);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --transition: var(--t);
  --transition-fast: var(--t-fast);
  --transition-spring: var(--t-spring);
  --border-radius: var(--radius);
  --border-radius-sm: var(--radius-sm);
}