/**
 * Дизайн-токены дэнас.
 * Единственное место, где заданы цвета, отступы и размеры сайта.
 * Меняешь здесь — меняется везде.
 */

:root {
  /* ── Бренд ─────────────────────────────────────────── */
  --color-primary: #1ca9a4;
  --color-primary-dark: #14837f;
  --color-primary-light: #e3f5f4;
  --color-accent: #f28c38;
  --color-accent-dark: #d97a2b;

  /* ── Текст ─────────────────────────────────────────── */
  --color-text: #0f172a;
  --color-text-soft: #334155;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-text-invert: #ffffff;

  /* ── Поверхности ───────────────────────────────────── */
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-bg: #f6f8f8;
  --color-header-bg: rgba(255, 255, 255, 0.9);

  /* ── Границы ───────────────────────────────────────── */
  --color-border: #e2e8f0;
  --color-border-soft: #f1f5f9;
  --color-border-strong: #cbd5e1;

  /* ── Подвал ────────────────────────────────────────── */
  /* Светлая бирюза в гамме сайта (23.09.2026, по просьбе владельца; прежний
     кремовый с терракотой выбивался из палитры). Акцент темнее бренда:
     #1ca9a4 на этом фоне даёт 2.7:1, а #0f6f6b — 5.5:1, мелкие ссылки читаются.
     Приглушённый текст тоже свой: общий --color-text-muted здесь 4.4:1. */
  --footer-bg: #eef8f7;
  --footer-border: #d3ecea;
  --footer-divider: #b8dfdc;
  --footer-fg: var(--color-text-soft);
  --footer-fg-strong: var(--color-text);
  --footer-fg-muted: #566579;
  --footer-accent: #0f6f6b;
  --footer-logo: var(--color-primary-dark);

  /* ── Статусы ───────────────────────────────────────── */
  --color-success: #0f766e;
  --color-success-bg: #f0fdfa;
  --color-success-border: #99f6e4;
  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-warning: #92400e;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-sale: #ef5a4f;

  /* ── Типографика ───────────────────────────────────── */
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.25rem;   /* 36px */
  --fs-5xl: 3rem;      /* 48px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 700; /* было 900: на сайте всё «чёрное» выглядело тяжело — выровняли с bold, 16.09.2026 */

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

  /* ── Отступы ───────────────────────────────────────── */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-14: 3.5rem;  /* 56px */
  --space-16: 4rem;    /* 64px */

  /* Зазор между знаком и подписью внутри одной ссылки: они читаются
     как одно слово, поэтому шаг мельче любого из шагов выше */
  --inline-icon-gap: 0.25rem;

  /* ── Скругления ────────────────────────────────────── */
  --radius-sm: 0.5rem;   /* 8px  */
  --radius: 0.75rem;     /* 12px — кнопки, инпуты */
  --radius-lg: 1rem;     /* 16px — карточки */
  --radius-xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── Тени ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow: 0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);

  /* ── Раскладка ─────────────────────────────────────── */
  --container-max: 80rem;      /* 1280px */
  --container-pad: var(--space-4);
  --header-height: 4.5rem;
  /* Ширина ниши с меню. 78vw, а не 88: остаток страницы — это кнопка
     «закрыть» во весь рост, и на 375 px он должен быть шире пальца */
  --drawer-width: min(20rem, 78vw);

  /* ── Прочее ────────────────────────────────────────── */
  --transition: 150ms ease;
  /* Кожа курьера в мини-игре и в подвале */
  --color-skin: #f1c7a1;
  --ring: 0 0 0 3px rgb(28 169 164 / 0.18);
  --z-header: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-6);
  }
}