/* ============================================================================
   DeliveryGoods — дизайн-токены (единственный источник правды)
   Концепция: «честная цена как показание прибора» — спокойный взрослый B2B,
   прохладный нейтрал + один уверенный акцент, моноширинный для цифр/данных.

   Каскад управляется через @layer — компоненты выигрывают по СЛОЮ, а не по
   !important. Порядок слоёв объявлен здесь один раз и определяет приоритет:
   reset < tokens < base < components < utilities.
   ВАЖНО: этот файл должен грузиться ПЕРВЫМ (до base/components/pages/utilities).
   ============================================================================ */

@layer reset, tokens, base, components, utilities;

/* ── reset ──────────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* типографика. Space Grotesk не имеет кириллицы → для кириллических
       заголовков стек падает в Geist (загружен, кириллица полная). */
    --font-display: "Space Grotesk", "Geist", system-ui, -apple-system, sans-serif;
    --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

    /* брендовый акцент (логистический зелёный). Применяется к CTA, ссылкам,
       бейджам и ЦИФРЕ ЦЕНЫ — не только к focus-кольцам. */
    --accent: oklch(0.56 0.14 158);
    --accent-press: oklch(0.49 0.14 158);
    --accent-tint: oklch(0.56 0.14 158 / 0.12);
    --accent-ink: oklch(0.99 0 0);

    /* семантика честной цены (тёмно-зелёный = «под ключ», подтверждение;
       чуть глубже акцента, чтобы success/честность отличались от CTA) */
    --positive: oklch(0.5 0.12 162);
    --positive-tint: oklch(0.5 0.12 162 / 0.14);

    /* предупреждение/ошибка */
    --danger: oklch(0.58 0.20 25);
    --danger-tint: oklch(0.58 0.20 25 / 0.10);

    /* нейтраль (светлая тема) */
    --paper: oklch(0.985 0.004 255);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.975 0.005 255);
    --sunk: oklch(0.96 0.006 255);
    --ink: oklch(0.23 0.014 260);
    --ink-2: oklch(0.44 0.012 260);
    --ink-3: oklch(0.60 0.010 260);
    --line: oklch(0.91 0.006 260);
    --line-2: oklch(0.86 0.008 260);
    --shadow-color: 230 30% 30%;

    /* плотность (1 = обычная; 0.72 плотно / 1.32 просторно) */
    --density: 1;
    --section-y: calc(96px * var(--density));

    /* радиусы */
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-full: 999px;

    /* отступы (rem-шкала) */
    --space-2xs: 0.25rem;   /* 4 */
    --space-xs: 0.5rem;     /* 8 */
    --space-sm: 0.75rem;    /* 12 */
    --space-md: 1rem;       /* 16 */
    --space-lg: 1.5rem;     /* 24 */
    --space-xl: 2rem;       /* 32 */
    --space-2xl: 3rem;      /* 48 */
    --space-3xl: 4rem;      /* 64 */

    /* переходы */
    --transition-fast: 0.12s cubic-bezier(0.2, 0.7, 0.3, 1);
    --transition-base: 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
    --transition-slow: 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    --transition-spring: 0.35s cubic-bezier(0.3, 0.8, 0.4, 1);

    /* контейнер и тени */
    --maxw: 1200px;
    --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 2px 8px hsl(var(--shadow-color) / 0.05);
    --shadow-2: 0 4px 14px hsl(var(--shadow-color) / 0.08), 0 18px 48px hsl(var(--shadow-color) / 0.10);
    --shadow-3: 0 8px 24px hsl(var(--shadow-color) / 0.12), 0 32px 70px hsl(var(--shadow-color) / 0.16);

    /* z-index шкала */
    --z-header: 100;
    --z-chat-fab: 150;
    --z-chat-panel: 160;
    --z-modal: 200;
  }

  /* тёмная тема — переключается атрибутом [data-theme="dark"] */
  [data-theme="dark"] {
    --paper: oklch(0.17 0.012 262);
    --surface: oklch(0.205 0.014 262);
    --surface-2: oklch(0.235 0.015 262);
    --sunk: oklch(0.15 0.012 262);
    --ink: oklch(0.96 0.005 262);
    --ink-2: oklch(0.76 0.012 262);
    --ink-3: oklch(0.58 0.012 262);
    --line: oklch(0.30 0.014 262);
    --line-2: oklch(0.37 0.016 262);
    --shadow-color: 260 60% 2%;
    --accent: oklch(0.72 0.15 158);
    --accent-press: oklch(0.78 0.15 158);
    --accent-tint: oklch(0.72 0.15 158 / 0.16);
    --accent-ink: oklch(0.15 0.02 158);
    --positive: oklch(0.74 0.14 162);
    --positive-tint: oklch(0.74 0.14 162 / 0.16);
    --danger: oklch(0.68 0.18 25);
    --danger-tint: oklch(0.68 0.18 25 / 0.16);
  }
}