/* Дизайн-токены. Светлая тема по умолчанию, тёмная — по системной настройке или data-theme="dark". */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Флюидная типографика */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;

  /* Отступы */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-gap: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 72rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --header-h: 4rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;

  /* Светлая палитра */
  --bg: #f6f7fb;
  --bg-alt: #eef0f6;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --border: #dfe3ee;
  --border-strong: #c7cddd;
  --text: #121826;
  --text-2: #4a5268;
  --text-3: #7a829a;
  --accent: #2f6bff;
  --accent-strong: #1e4fd1;
  --accent-soft: #e3ebff;
  --accent-text: #1b43b5;
  --fe: #2f6bff;
  --be: #7c3aed;
  --ops: #0e9f6e;
  --shadow-sm: 0 1px 2px rgb(18 24 38 / 0.06), 0 1px 1px rgb(18 24 38 / 0.04);
  --shadow-md: 0 8px 24px -8px rgb(18 24 38 / 0.14), 0 2px 6px rgb(18 24 38 / 0.05);
  --hero-glow-1: rgb(47 107 255 / 0.22);
  --hero-glow-2: rgb(124 58 237 / 0.16);
  --header-bg: rgb(246 247 251 / 0.78);
  color-scheme: light;
}

/* Тёмная палитра */
:root[data-theme="dark"],
:root[data-theme="auto"]:not([data-theme="light"]) {
  --dark-bg: #0d1117;
  --dark-bg-alt: #10161f;
  --dark-surface: #161c26;
  --dark-surface-2: #1c2330;
  --dark-border: #262f3d;
  --dark-border-strong: #364156;
  --dark-text: #e8ecf4;
  --dark-text-2: #aab3c5;
  --dark-text-3: #7b859b;
  --dark-accent: #6b9bff;
  --dark-accent-strong: #8fb3ff;
  --dark-accent-soft: #1b2a4d;
  --dark-accent-text: #9fbdff;
  --dark-fe: #6b9bff;
  --dark-be: #b388ff;
  --dark-ops: #34d399;
  --dark-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --dark-shadow-md: 0 12px 32px -10px rgb(0 0 0 / 0.6);
  --dark-hero-glow-1: rgb(107 155 255 / 0.22);
  --dark-hero-glow-2: rgb(179 136 255 / 0.16);
  --dark-header-bg: rgb(13 17 23 / 0.72);
}

:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --bg-alt: var(--dark-bg-alt);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --border: var(--dark-border);
  --border-strong: var(--dark-border-strong);
  --text: var(--dark-text);
  --text-2: var(--dark-text-2);
  --text-3: var(--dark-text-3);
  --accent: var(--dark-accent);
  --accent-strong: var(--dark-accent-strong);
  --accent-soft: var(--dark-accent-soft);
  --accent-text: var(--dark-accent-text);
  --fe: var(--dark-fe);
  --be: var(--dark-be);
  --ops: var(--dark-ops);
  --shadow-sm: var(--dark-shadow-sm);
  --shadow-md: var(--dark-shadow-md);
  --hero-glow-1: var(--dark-hero-glow-1);
  --hero-glow-2: var(--dark-hero-glow-2);
  --header-bg: var(--dark-header-bg);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: var(--dark-bg);
    --bg-alt: var(--dark-bg-alt);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --border: var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --text: var(--dark-text);
    --text-2: var(--dark-text-2);
    --text-3: var(--dark-text-3);
    --accent: var(--dark-accent);
    --accent-strong: var(--dark-accent-strong);
    --accent-soft: var(--dark-accent-soft);
    --accent-text: var(--dark-accent-text);
    --fe: var(--dark-fe);
    --be: var(--dark-be);
    --ops: var(--dark-ops);
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --hero-glow-1: var(--dark-hero-glow-1);
    --hero-glow-2: var(--dark-hero-glow-2);
    --header-bg: var(--dark-header-bg);
    color-scheme: dark;
  }
}