/* ============================================================
   WebLoop Studio — Design Tokens
   Единая система: цвет, типографика, ритм, тени, движение.
   ============================================================ */

:root {
  /* --- Палитра (dark по умолчанию) --- */
  --bg: #07080d;
  --bg-2: #0b0d15;
  --surface: #10131d;
  --surface-2: #161a27;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --ink: #f2f4f8;
  --ink-2: #b7bcc9;
  --ink-3: #7c8294;

  --cyan: #22e3ff;
  --violet: #8b5cf6;
  --lime: #b8ff3c;
  --pink: #ff3d8a;
  --amber: #ffb347;

  --accent: var(--cyan);
  --accent-2: var(--violet);
  --accent-3: var(--lime);

  --grad-loop: linear-gradient(120deg, var(--cyan) 0%, var(--violet) 50%, var(--pink) 100%);
  --grad-lime: linear-gradient(120deg, var(--lime), var(--cyan));
  --grad-text: linear-gradient(95deg, #fff 0%, #c9d1ff 40%, var(--cyan) 100%);

  /* --- Типографика --- */
  --font-display: "Unbounded", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
  --fs-sm: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.8vw, 4rem);
  --fs-3xl: clamp(2.3rem, 1.4rem + 3.6vw, 4.8rem);
  --fs-hero: clamp(2.3rem, 1.2rem + 6.2vw, 7.6rem);

  /* --- Ритм --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  /* --- Тени и свечение --- */
  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --glow-cyan: 0 0 40px -6px rgba(34, 227, 255, 0.55);
  --glow-violet: 0 0 40px -6px rgba(139, 92, 246, 0.55);

  /* --- Движение --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --nav-h: 72px;

  color-scheme: dark;
}

/* --- Светлая тема --- */
:root[data-theme="light"] {
  --bg: #f4f5fa;
  --bg-2: #ebedf5;
  --surface: #ffffff;
  --surface-2: #f1f3fa;
  --line: rgba(10, 12, 30, 0.09);
  --line-2: rgba(10, 12, 30, 0.18);
  --ink: #0b0d15;
  --ink-2: #3c4256;
  --ink-3: #6b7187;
  --cyan: #0097b5;
  --violet: #6d3cf0;
  --lime: #4f9d00;
  --pink: #e01a68;
  --grad-text: linear-gradient(95deg, #0b0d15 0%, #2a2f6b 40%, var(--cyan) 100%);
  --shadow-soft: 0 20px 60px -24px rgba(20, 30, 80, 0.3);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}