/* ============================================================
   NutriForge — дизайн-система
   Только токены. Компоненты собираются из них в style.css.
   Ничего не «на глаз»: отступы, размеры и цвета берутся отсюда.
   ============================================================ */

:root {
  /* --- Шкала отступов. 4-точечная сетка, без промежуточных значений --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

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

  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: 27px;
  --t-2xl: 34px;
  --t-3xl: 44px;

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

  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;

  /* --- Радиусы --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* --- Границы --- */
  --bw: 1px;

  /* --- Тени. Мягкие, многослойные --- */
  --shadow-xs: 0 1px 2px rgba(14, 22, 30, 0.05);
  --shadow-sm: 0 1px 3px rgba(14, 22, 30, 0.07), 0 1px 2px rgba(14, 22, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 22, 30, 0.08), 0 2px 4px rgba(14, 22, 30, 0.04);
  --shadow-lg: 0 12px 32px rgba(14, 22, 30, 0.12), 0 4px 8px rgba(14, 22, 30, 0.05);

  /* --- Переходы --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* --- Слои --- */
  --z-header: 50;

  /* --- Ширины --- */
  --w-page: 1160px;
  --w-prose: 66ch;

  /* ==========================================================
     ПАЛИТРА — светлая тема (базовая)
     Акцент: глубокий петролевый. Не синий и не зелёный,
     поэтому не конфликтует с семантикой наличия.
     ========================================================== */

  /* Поверхности */
  --c-bg: #f7f8f7;
  --c-surface: #ffffff;
  --c-surface-2: #f1f3f2;
  --c-surface-3: #e7eae9;
  --c-overlay: rgba(12, 24, 26, 0.45);

  /* Текст */
  --c-ink: #0f1c1f;
  --c-ink-2: #3d4a4d;
  --c-ink-3: #6b787b;
  --c-ink-4: #8c9698;

  /* Границы */
  --c-line: #e0e5e4;
  --c-line-strong: #c9d1d0;

  /* Акцент */
  --c-accent: #0b6e6e;
  --c-accent-hover: #085656;
  --c-accent-soft: #e3f2f1;
  --c-accent-ink: #064e4e;
  --c-on-accent: #ffffff;

  /* Семантика */
  --c-ok: #1f7a46;
  --c-ok-soft: #e4f4ea;
  --c-warn: #9a6212;
  --c-warn-soft: #fdf1dc;
  --c-off: #656f71;
  --c-off-soft: #eef0f0;

  /* Фокус */
  --c-topbar-bg: #0f1c1f;
  --c-topbar-ink: #ffffff;

  --c-focus: #0b6e6e;
  --focus-ring: 0 0 0 3px rgba(11, 110, 110, 0.28);

  color-scheme: light;
}

/* ==========================================================
   Тёмная тема. Переопределяются ТОЛЬКО значения токенов.
   ========================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0d1214;
    --c-surface: #141b1d;
    --c-surface-2: #1a2225;
    --c-surface-3: #232c30;
    --c-overlay: rgba(0, 0, 0, 0.6);

    --c-ink: #e9eeed;
    --c-ink-2: #b6c0c0;
    --c-ink-3: #8b9698;
    --c-ink-4: #66716f;

    --c-line: #263034;
    --c-line-strong: #354246;

    --c-accent: #4ec9c0;
    --c-accent-hover: #6fd8d0;
    --c-accent-soft: #16302f;
    --c-accent-ink: #8fe5de;
    --c-on-accent: #06201f;

    --c-ok: #4bbd7e;
    --c-ok-soft: #122b1e;
    --c-warn: #d9a74a;
    --c-warn-soft: #2c2313;
    --c-off: #818d8f;
    --c-off-soft: #1d2528;

    --c-topbar-bg: #070c0d;
    --c-topbar-ink: #cfd8d7;

    --c-focus: #4ec9c0;
    --focus-ring: 0 0 0 3px rgba(78, 201, 192, 0.32);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --c-bg: #0d1214;
  --c-surface: #141b1d;
  --c-surface-2: #1a2225;
  --c-surface-3: #232c30;
  --c-overlay: rgba(0, 0, 0, 0.6);

  --c-ink: #e9eeed;
  --c-ink-2: #b6c0c0;
  --c-ink-3: #8b9698;
  --c-ink-4: #66716f;

  --c-line: #263034;
  --c-line-strong: #354246;

  --c-accent: #4ec9c0;
  --c-accent-hover: #6fd8d0;
  --c-accent-soft: #16302f;
  --c-accent-ink: #8fe5de;
  --c-on-accent: #06201f;

  --c-ok: #4bbd7e;
  --c-ok-soft: #122b1e;
  --c-warn: #d9a74a;
  --c-warn-soft: #2c2313;
  --c-off: #818d8f;
  --c-off-soft: #1d2528;

  --c-topbar-bg: #070c0d;
  --c-topbar-ink: #cfd8d7;

  --c-focus: #4ec9c0;
  --focus-ring: 0 0 0 3px rgba(78, 201, 192, 0.32);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}