/* ==========================================================================
   ПОТОК — design tokens
   Один источник правды: цвета, типографика, ритм, радиусы, тени, движение.
   Никаких внешних зависимостей и шрифтов — работает офлайн.
   ========================================================================== */

:root {
  /* --- Палитра (сырые значения, не использовать напрямую в компонентах) --- */
  --c-ink-1000: #06070A;
  --c-ink-900:  #0A0C11;
  --c-ink-800:  #10131A;
  --c-ink-700:  #161A23;
  --c-ink-600:  #1E232E;
  --c-ink-500:  #2A303C;

  --c-paper-000: #FFFFFF;
  --c-paper-100: #F7F8FA;
  --c-paper-200: #EEF0F4;
  --c-paper-300: #DCE0E8;

  --c-lime-400: #D8FF4A;
  --c-lime-500: #C6F03C;
  --c-lime-600: #A8D021;
  --c-cyan-400: #5BD8FF;
  --c-cyan-600: #0A6E8C;
  --c-coral-400: #FF7A59;

  --c-slate-050: #EDEFF4;
  --c-slate-300: #9BA3B2;
  --c-slate-400: #7A8291;
  --c-slate-500: #6B7383;
  --c-slate-600: #565E6E;
  --c-slate-800: #262B36;
  --c-slate-900: #101319;

  /* --- Семантика: тёмная тема (по умолчанию) --- */
  --bg:          var(--c-ink-900);
  --bg-elev:     var(--c-ink-800);
  --bg-sunken:   var(--c-ink-1000);
  --bg-inset:    var(--c-ink-700);
  --border:      var(--c-slate-800);
  --border-soft: rgba(237, 239, 244, 0.08);

  --text:        var(--c-slate-050);
  --text-muted:  var(--c-slate-300);
  --text-faint:  var(--c-slate-400);

  --brand:       var(--c-lime-400);
  --brand-hover: var(--c-lime-500);
  --brand-ink:   #0D1005;          /* текст поверх акцента */
  --brand-text:  var(--c-lime-400); /* акцентный ТЕКСТ на фоне страницы */
  --danger:      var(--c-coral-400);
  --link:        var(--c-cyan-400);
  --ring:        rgba(216, 255, 74, 0.45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  --glow:      0 0 60px -12px rgba(216, 255, 74, 0.35);

  --hero-grid:  rgba(237, 239, 244, 0.05);
  --scrim:      rgba(6, 7, 10, 0.72);

  color-scheme: dark;
}

/* --- Семантика: светлая тема --- */
html[data-theme="light"] {
  --bg:          var(--c-paper-100);
  --bg-elev:     var(--c-paper-000);
  --bg-sunken:   var(--c-paper-200);
  --bg-inset:    var(--c-paper-200);
  --border:      var(--c-paper-300);
  --border-soft: rgba(16, 19, 25, 0.08);

  --text:        var(--c-slate-900);
  --text-muted:  var(--c-slate-600);
  --text-faint:  var(--c-slate-500);

  --brand:       var(--c-lime-500);
  --brand-hover: var(--c-lime-600);
  --brand-ink:   #0D1005;
  /* Лайм на светлом фоне даёт контраст 1.2:1 — для текста берём тёмный оттенок
     (#4A7000 = 5.5:1 на #F7F8FA, 5.1:1 на #EEF0F4) */
  --brand-text:  #4A7000;
  --danger:      #C2410C;
  --link:        var(--c-cyan-600);
  --ring:        rgba(10, 110, 140, 0.4);

  --shadow-sm: 0 1px 2px rgba(16, 19, 25, 0.06);
  --shadow-md: 0 14px 34px -18px rgba(16, 19, 25, 0.28);
  --shadow-lg: 0 40px 80px -44px rgba(16, 19, 25, 0.35);
  --glow:      0 0 60px -18px rgba(168, 208, 33, 0.35);

  --hero-grid:  rgba(16, 19, 25, 0.05);
  --scrim:      rgba(247, 248, 250, 0.75);

  color-scheme: light;
}

/* --- Типографика --- */
:root {
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Segoe UI Variable Display", "Segoe UI",
                  system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas,
               "Liberation Mono", monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl:  clamp(1.95rem, 1.4rem + 2.4vw, 3rem);
  --fs-3xl:  clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);

  --lh-tight: 1.06;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  --ls-display: -0.03em;
  --ls-tight:   -0.015em;
  --ls-wide:    0.08em;
}

/* --- Ритм, сетка, форма --- */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container: 1160px;
  --container-narrow: 760px;
  --gutter: clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --section-y: clamp(4rem, 3rem + 6vw, 8rem);
  --header-h: 68px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;

  --z-header: 50;
  --z-overlay: 80;
}

/* --- Уважение к настройкам системы --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}