/* ==========================================================================
   01 · Токены дизайн-системы
   Единственный источник правды для цвета, типографики, отступов, теней и слоёв.
   Документация: spec/01-design-system.md
   Правило: значения в разметке и других файлах — только через var(--*).
   ========================================================================== */

/* Порядок каскадных слоёв. Объявлен здесь один раз, действует для всех файлов. */
@layer tokens, base, components, sections, utils;

@layer tokens {
  :root {
    /* --- Палитра (spec/01, §1) ------------------------------------------ */
    --c-white: #ffffff;

    --c-bg: #ffffff;          /* основной фон страницы */
    --c-bg-soft: #f4f4f5;     /* чётные секции, карточки на белом */
    --c-bg-dark: #0b0b0c;     /* чёрные секции, шапка */
    --c-bg-dark-2: #17171a;   /* карточки внутри чёрных секций */

    --c-ink: #0b0b0c;         /* заголовки и основной текст */
    --c-ink-2: #3d3d44;       /* вторичный текст */
    --c-muted: #6c6c75;       /* подписи, сноски (только на светлом) */
    --c-on-dark: #ffffff;     /* текст на чёрном */
    --c-on-dark-2: #a8a8b0;   /* вторичный текст на чёрном */

    --c-red: #fe0000;         /* из kanku.png (мода пикселей: 254,0,0) */
    --c-red-cta: #d10000;     /* фон кнопок с белым текстом 15–16 px */
    --c-red-dark: #a80000;    /* hover/pressed, красный текст на белом */
    --c-red-bright: #ff3333;  /* красный текст/иконки на чёрном фоне */
    --c-red-soft: #ffeded;    /* фон бейджей и подсветок */
    --c-red-line: #ffc9c9;    /* границы бейджей */

    --c-line: #e4e4e7;        /* границы на светлом */
    --c-line-2: #c9c9ce;      /* границы полей ввода */
    --c-line-dark: #2a2a2e;   /* границы на чёрном */
    --c-ok: #1b7f4b;
    --c-warn: #b26b00;
    --c-error: #c90000;

    /* --- Типографика (spec/01, §2) -------------------------------------- */
    --f-display: 'Arial Narrow', system-ui, sans-serif;
    --f-body: 'Segoe UI', Roboto, Arial, sans-serif;

    --fs-hero: clamp(1.875rem, 7.5vw, 3rem);   /* 30 → 48 px */
    --fs-h2: clamp(1.5rem, 5.5vw, 2.25rem);    /* 24 → 36 px */
    --fs-h3: 1.25rem;       /* 20 px */
    --fs-h4: 1.0625rem;     /* 17 px */
    --fs-body: 1rem;        /* 16 px */
    --fs-sm: 0.9375rem;     /* 15 px */
    --fs-xs: 0.8125rem;     /* 13 px */
    --fs-eyebrow: 0.75rem;  /* 12 px */

    --lh-hero: 1.05;
    --lh-h2: 1.15;
    --lh-h3: 1.25;
    --lh-body: 1.55;
    --lh-sm: 1.45;

    --measure: 62ch;        /* максимальная длина строки текста */
    --track-eyebrow: 0.12em;

    /* --- Шкала отступов: шаг 4 px (spec/01, §3) ------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* --- Сетка и размеры ------------------------------------------------- */
    --w-content: 1200px;
    --w-narrow: 720px;
    --pad-x: var(--sp-4);           /* поля контейнера: 360–479 px */
    --section-y: var(--sp-12);      /* вертикальный ритм секций */
    --header-h: 68px;               /* высота шапки (было 56, +20 %) */
    --sticky-h: 64px;               /* высота стики-панели CTA */
    --tap: 44px;                    /* минимальная зона нажатия */

    /* --- Радиусы --------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --border: 1px solid var(--c-line);

    /* --- Тени ------------------------------------------------------------ */
    --sh-1: 0 1px 2px rgba(11, 11, 12, 0.06);
    --sh-2: 0 8px 24px rgba(11, 11, 12, 0.1);
    --sh-3: 0 16px 48px rgba(11, 11, 12, 0.16);
    --sh-red: 0 8px 24px rgba(209, 0, 0, 0.24);
    --sh-header: 0 2px 14px rgba(11, 11, 12, 0.32);  /* тень закреплённой шапки */

    /* --- Слои ------------------------------------------------------------ */
    --z-base: 1;
    --z-decor: 5;
    --z-sticky: 40;
    --z-header: 50;
    --z-panel: 60;
    --z-modal: 70;
    --z-toast: 80;
    --z-skip: 90;   /* «Перейти к содержанию» — всегда выше всего */

    /* --- Анимация -------------------------------------------------------- */
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 320ms;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* --- Контекст -------------------------------------------------------- */
    --focus-ring: var(--c-ink);  /* тёмные блоки переопределяют на --c-on-dark */
  }

  /* Брейкпоинты (spec/01, §3): только min-width */
  @media (min-width: 480px) {
    :root {
      --pad-x: var(--sp-4);
    }
  }

  @media (min-width: 768px) {
    :root {
      --pad-x: var(--sp-6);
      --w-content: 700px;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --pad-x: var(--sp-8);
      --section-y: var(--sp-20);
    }
  }

  @media (min-width: 1280px) {
    :root {
      --section-y: var(--sp-24);
    }
  }
}