/* Токены витрины. Меняешь здесь, меняется весь сайт. */

:root {
  color-scheme: light;

  /* ── Типографика ────────────────────────────────────────────────────────
     Две гарнитуры, обе переменные, обе с полной кириллицей.
     Oswald несёт вывеску: логотип, заголовки секций, названия позиций, цены.
     Golos Text несёт речь: всё, что человек читает построчно. */

  --font-display: 'Oswald', 'Oswald Fallback', 'Arial Narrow', system-ui, sans-serif;
  --font-text: 'Golos Text', 'Golos Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --step-1:  clamp(1.16rem, 1.08rem + 0.36vw, 1.34rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);

  /* Роли набора. Размер даёт ступень, характер задают эти строки.
     Oswald узкий и высокий, поэтому интерлиньяж жмётся, а трекинг идёт
     чуть вверх: плотно поставленные узкие буквы слипаются. */
  --display-weight: 600;
  --display-track: 0.004em;
  --display-lh: 0.94;

  --headline-weight: 600;
  --headline-track: 0.008em;
  --headline-lh: 1;

  --title-weight: 500;
  --title-track: 0.004em;
  --title-lh: 1.16;

  --price-weight: 600;
  --price-track: 0.006em;

  --label-weight: 500;
  --label-track: 0.012em;

  --body-weight: 400;
  --body-track: 0em;
  --body-lh: 1.6;

  /* Ритм */
  --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;

  --shell: 78rem;
  --shell-pad: clamp(1.15rem, 4vw, 2.75rem);

  --r-xxs: 2px;
  --r-xs: 6px;
  --r-focus: 4px;
  --r-sm: 10px;
  --r-card: 14px;
  --r-block: 22px;
  --r-sheet: 18px;
  --r-pill: 999px;

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;
  --dur-2: 280ms;
  --dur-3: 560ms;

  /* Слои */
  --z-header: 40;
  --z-filters: 30;
  --z-sheet: 60;

  /* ── Светлая тема, основная ────────────────────────────────────────────
     Сцена: дневной свет, телефон в руке, беглый просмотр за минуту.
     Белая бумага под каталогом, тёмное поле под первым экраном и
     закрывающим блоком. Ровно один акцент, гранатовый, только на действии. */

  --bg: oklch(1 0 0);
  --bg-sunk: oklch(0.972 0.002 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.978 0.002 250);
  --line: oklch(0.918 0.004 250);
  --line-strong: oklch(0.83 0.006 250);

  --ink: oklch(0.215 0.018 250);
  --ink-2: oklch(0.44 0.014 250);
  --ink-3: oklch(0.552 0.014 250);

  /* Тёмное поле. Живёт в обеих темах и в обеих одинаковое: это не фон
     страницы, а материал, из которого сделаны первый экран и подвал. */
  --field: oklch(0.19 0.016 250);
  --field-2: oklch(0.245 0.016 250);
  --field-line: oklch(0.32 0.014 250);
  --field-ink: oklch(0.975 0.003 250);
  --field-ink-2: oklch(0.79 0.01 250);

  --accent: oklch(0.505 0.19 22);
  --accent-hover: oklch(0.445 0.18 22);
  --accent-ink: oklch(1 0 0);
  --accent-text: oklch(0.505 0.19 22);
  --accent-soft: oklch(0.955 0.028 22);

  --danger-text: oklch(0.5 0.16 28);

  /* Возвышение объявлено один раз: на бумаге тень, границы у карточек нет. */
  --elevation: 0 1px 2px oklch(0.25 0.03 250 / 0.05), 0 16px 32px -22px oklch(0.25 0.03 250 / 0.3);
  --elevation-hover: 0 2px 4px oklch(0.25 0.03 250 / 0.06), 0 26px 44px -24px oklch(0.25 0.03 250 / 0.36);
  --elevation-pop: 0 18px 36px -20px oklch(0.25 0.03 250 / 0.4);
  --card-border: none;

  /* Затемнение поверх страницы под развёрнутой карточкой и под её кнопкой
     закрытия. Оно одинаковое в обеих темах: это не поверхность, а тень. */
  --scrim: oklch(0.16 0.02 250 / 0.62);
  --scrim-soft: oklch(0.16 0.02 250 / 0.55);

  --veil: linear-gradient(
    to top,
    oklch(0.19 0.016 250) 2%,
    oklch(0.19 0.016 250 / 0.92) 26%,
    oklch(0.19 0.016 250 / 0.55) 56%,
    oklch(0.19 0.016 250 / 0.12) 86%,
    transparent 100%
  );
}

/* ── Тёмная тема ────────────────────────────────────────────────────────────
   Та же комната вечером. Бумага темнеет до угля, тёмное поле остаётся
   тёмным полем, но чуть отходит от фона, чтобы первый экран не сливался.
   Возвышение переворачивается: тени нет, работает линия. */

:root[data-theme='dark'] {
  color-scheme: dark;

  /* Светлый текст на тёмном требует компенсации: чуть больше веса,
     интерлиньяжа и трекинга, иначе тонкие штрихи расползаются в свечение. */
  --body-weight: 410;
  --body-track: 0.005em;
  --body-lh: 1.64;

  --bg: oklch(0.175 0.012 250);
  --bg-sunk: oklch(0.148 0.011 250);
  --surface: oklch(0.222 0.012 250);
  --surface-2: oklch(0.262 0.013 250);
  --line: oklch(0.325 0.012 250);
  --line-strong: oklch(0.43 0.014 250);

  --ink: oklch(0.972 0.003 250);
  --ink-2: oklch(0.83 0.008 250);
  --ink-3: oklch(0.715 0.01 250);

  --field: oklch(0.245 0.014 250);
  --field-2: oklch(0.3 0.014 250);
  --field-line: oklch(0.375 0.014 250);
  --field-ink: oklch(0.975 0.003 250);
  --field-ink-2: oklch(0.8 0.01 250);

  --accent: oklch(0.665 0.19 22);
  --accent-hover: oklch(0.715 0.175 22);
  --accent-ink: oklch(0.17 0.05 22);
  --accent-text: oklch(0.755 0.16 22);
  --accent-soft: oklch(0.3 0.06 22);

  --danger-text: oklch(0.78 0.12 28);

  --elevation: none;
  --elevation-hover: none;
  --elevation-pop: none;
  --card-border: 1px solid var(--line);

  --veil: linear-gradient(
    to top,
    oklch(0.245 0.014 250) 2%,
    oklch(0.245 0.014 250 / 0.92) 26%,
    oklch(0.245 0.014 250 / 0.55) 56%,
    oklch(0.245 0.014 250 / 0.12) 86%,
    transparent 100%
  );
}