/* ==========================================================================
   Токены. Значения сняты из Figma: коллекция «Tokens», режимы «Светлая»/«Тёмная».
   Ни один компонент не должен хардкодить цвет — только var(--…).
   ========================================================================== */

:root {
  /* --- Цвет: светлая тема (режим «Светлая») --- */
  --c-bg-base: #FDFCFA;
  --c-bg-soft: #F8F6F1;
  --c-bg-soft-alt: #F4F2EC;
  --c-bg-card: #FFFFFF;
  --c-bg-ink: #23201C;
  --c-bg-ink-hover: #3A342D;
  --c-bg-ink-press: #15120F;
  --c-bg-overlay: #23201C;

  --c-border-subtle: #EDEAE2;
  --c-border-strong: #E4E0D6;

  --c-text-primary: #23201C;
  --c-text-secondary: #6E675C;
  --c-text-muted: #A29A8F;
  --c-text-inverse: #FFFFFF;
  --c-text-inverse-muted: #C6C0B5;

  --c-accent-gold: #B08D45;
  --c-accent-deep: #8A6C31;
  --c-accent-soft: #F7F3EA;

  --c-state-free: #3F7A55;
  --c-state-free-soft: #EFF5F1;
  --c-state-error: #A8442F;
  --c-state-error-soft: #F9F1EF;

  /* --- Радиусы (Figma radius/*) --- */
  --r-btn: 4px;   /* кнопки, инпуты — по спецификации макета */
  --r-card: 8px;  /* карточки, списки */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Шаг отступов (Figma space/*) --- */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;

  /* --- Сетка --- */
  --container: 1200px;
  --gutter: 24px;
  --pad-x: 120px;

  /* --- Типографика: семейства --- */
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --- Типографика: шкала (кегль / интерлиньяж / трекинг) --- */
  --t-display-xl: 300 56px/62px var(--f-serif);
  --t-display-xl-ls: -0.5px;
  --t-display-l: 300 40px/46px var(--f-serif);
  --t-display-l-ls: -0.4px;
  --t-display-m: 400 28px/35px var(--f-serif);
  --t-display-m-ls: -0.2px;
  --t-display-s: 400 20px/26px var(--f-serif);
  --t-display-s-ls: 0px;
  --t-quote: italic 300 24px/36px var(--f-serif);

  --t-body-l: 400 18px/29px var(--f-sans);
  --t-body-m: 400 16px/26px var(--f-sans);
  --t-body-s: 400 14px/21px var(--f-sans);
  --t-body-xs: 400 13px/18px var(--f-sans);

  --t-label-nav: 500 15px/20px var(--f-sans);
  --t-label-m: 500 14px/20px var(--f-sans);
  --t-label-strong: 500 15px/20px var(--f-sans);
  --t-label-meta: 500 13px/18px var(--f-sans);
  --t-label-row: 500 17px/22px var(--f-sans);
  --t-label-row-ls: -0.1px;
  --t-label-button: 500 15px/20px var(--f-sans);
  --t-label-eyebrow: 600 12px/16px var(--f-sans);
  --t-label-eyebrow-ls: 1.6px;
  --t-label-price: 600 17px/22px var(--f-sans);
  --t-label-price-ls: -0.2px;

  /* --- Прочее --- */
  --dur: .25s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- Цвет: тёмная тема (режим «Тёмная») --- */
[data-theme="dark"] {
  --c-bg-base: #14120F;
  --c-bg-soft: #1B1815;
  --c-bg-soft-alt: #211E19;
  --c-bg-card: #1A1714;
  --c-bg-ink: #F0EDE6;
  --c-bg-ink-hover: #E2DED4;
  --c-bg-ink-press: #CFC9BD;
  --c-bg-overlay: #000000;

  --c-border-subtle: #2C2823;
  --c-border-strong: #3B3630;

  --c-text-primary: #F3F0EA;
  --c-text-secondary: #ADA69A;
  --c-text-muted: #7E786D;
  --c-text-inverse: #17150F;
  --c-text-inverse-muted: #4A453D;

  --c-accent-gold: #C7A15D;
  --c-accent-deep: #D8B87C;
  --c-accent-soft: #2A2318;

  --c-state-free: #7CC79A;
  --c-state-free-soft: #17251C;
  --c-state-error: #E3907A;
  --c-state-error-soft: #2A1B17;
}

/* Планшет: контейнер 8 колонок, поля 32 */
@media (max-width: 1023px) {
  :root { --pad-x: 32px; --gutter: 20px; }
}

/* Мобильные: 4 колонки, поля 20 */
@media (max-width: 639px) {
  :root {
    --pad-x: 20px;
    --gutter: 16px;
    --t-display-xl: 300 34px/38px var(--f-serif);
    --t-display-xl-ls: -0.4px;
    --t-display-l: 300 26px/31px var(--f-serif);
    --t-display-l-ls: -0.3px;
    --t-display-m: 400 20px/26px var(--f-serif);
    --t-display-m-ls: 0px;
    --t-quote: italic 300 20px/30px var(--f-serif);
  }
}