/* ===========================================================================
   ToSell — ДИЗАЙН-СИСТЕМА (единый источник правды).
   Подключается ПЕРВЫМ, до любых других стилей. Цвета — палитра 5key.
   Правило: в компонентах использовать ТОЛЬКО var(--token), без «магических» чисел.
   Менять бренд/масштаб — здесь, в одном месте; всё остальное подхватится.
   Документация и правила: docs/design-system.md
   =========================================================================== */

:root {
    /* ── Цвета: поверхности ── */
    --bg:            #0a0e1a;
    --bg-card:       #141826;
    --bg-card-2:     #181d2e;
    --bg-input:      #0a0e1a;

    /* ── Цвета: границы (точно по 5key) ── */
    --border:        #232838;
    --border-in:     #1c2030;
    --border-soft:   rgba(255,255,255,.06);
    --input-border:  #2a3042;

    /* ── Цвета: текст (точно по 5key) ── */
    --text:          #d8dde8;
    --text-dim:      #9ca5ba;
    --text-faint:    #4a5060;

    /* ── Алиасы 5key (для портированных компонентов style.css/admin.css) ── */
    --card-bg:       #141826;
    --surface:       #141826;
    --border-card:   #232838;

    /* ── Цвета: бренд/акцент (синий 5key) ── */
    --accent:        #00d4ff;
    --accent-2:      #4f8cff;
    --accent-hover:  #2de1ff;
    --accent-ink:    #04121a;   /* текст на акцентном фоне */

    /* ── Цвета: семантика ── */
    --green:         #7fff5a;
    --red:           #ff3b6e;
    --yellow:        #ffcf5a;

    /* ── RGB-компоненты для полупрозрачных оттенков: rgba(var(--x-rgb), a) ── */
    --accent-rgb: 0,212,255;
    --green-rgb:  127,255,90;
    --yellow-rgb: 255,207,90;
    --red-rgb:    255,59,110;
    --bg-rgb:     10,14,26;

    /* ── Производные поверхности/градиенты ── */
    --glass:        rgba(10,14,26,.7);          /* фон стеклянной шапки */
    --overlay:      rgba(255,255,255,.03);      /* лёгкая подложка (btn-ghost) */
    --gradient-cta: linear-gradient(150deg, #122236, #0c1422);

    /* ── Шрифт ── */
    /* Системный стек 5key. Сменить шрифт = поменять ТОЛЬКО эту строку. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ── Типографика: размеры (модульная шкала ~1.25, база 16px) ── */
    --text-xs:    0.8125rem;  /* 13px — бейджи, оверлайны */
    --text-sm:    0.875rem;   /* 14px — мелкий текст, навигация */
    --text-base:  1rem;       /* 16px — основной текст */
    --text-lg:    1.125rem;   /* 18px — лид, крупный текст */
    --text-xl:    1.375rem;   /* 22px — h3 */
    --text-2xl:   1.75rem;    /* 28px */
    --text-3xl:   2.25rem;    /* 36px */
    --text-4xl:   3rem;       /* 48px */
    /* Флюидные размеры для крупных заголовков (без media-запросов) */
    --fs-hero:    clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);   /* 36 → 56 */
    --fs-h2:      clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);  /* 26 → 36 */

    /* ── Типографика: высота строки ── */
    --lh-tight:   1.1;    /* заголовки */
    --lh-snug:    1.3;
    --lh-normal:  1.6;    /* основной текст */

    /* ── Типографика: насыщенность ── */
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* ── Типографика: межбуквенный интервал ── */
    --tracking-tighter: -0.03em;  /* display */
    --tracking-tight:   -0.02em;  /* заголовки */
    --tracking-normal:   0;
    --tracking-wide:     0.12em;  /* оверлайн/eyebrow (UPPERCASE) */

    /* ── Отступы: шкала (база 4px) ── */
    --sp-1:  0.25rem;  /*  4 */
    --sp-2:  0.5rem;   /*  8 */
    --sp-3:  0.75rem;  /* 12 */
    --sp-4:  1rem;     /* 16 */
    --sp-5:  1.5rem;   /* 24 */
    --sp-6:  2rem;     /* 32 */
    --sp-7:  3rem;     /* 48 */
    --sp-8:  4rem;     /* 64 */
    --sp-9:  6rem;     /* 96 */
    --sp-10: 7.5rem;   /* 120 */

    /* ── Радиусы ── */
    --radius-sm:   8px;
    --radius:     12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-pill: 999px;

    /* ── Тени ── */
    --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
    --shadow-md: 0 12px 34px -14px rgba(0,0,0,.55);
    --shadow-lg: 0 40px 90px -40px rgba(0,0,0,.8);
    --glow:      0 12px 50px -12px rgba(0,212,255,.5);  /* = rgba(var(--accent-rgb),.5) */

    /* ── Раскладка ── */
    --container:  1440px;          /* макс. ширина контента (как в 5key) */
    --measure:    640px;           /* макс. ширина текстового блока (читабельность) */
    --gutter:     2.5rem;          /* боковые поля 40px (как в 5key) */
    --section-y:  clamp(4rem, 7vw, 7.5rem);  /* вертикальный ритм секций */

    /* ── Переходы ── */
    --t-fast: .15s ease;
    --t:      .18s ease;
}

/* ===========================================================================
   БАЗА — сброс + типографические дефолты по шкале.
   Любая страница, подключившая tokens.css, получает единый базовый стиль.
   =========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--text);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    line-height: var(--lh-tight);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); }

p { line-height: var(--lh-normal); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Видимый фокус для клавиатурной навигации (доступность) */
:where(a, button, summary, input, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

/* Утилита для скринридеров */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}