/* tokens.css — числа бренда для vibehacking.ru
   ИСТОЧНИК: ~/Project/Deep Бездна/значения.css v2.1. Правки — там, сюда переносить.
   Отличие от источника (решение носителя 16.09): дисплейный шрифт Unbounded вместо Benzin
   (у Benzin только платная веб-лицензия). Кегли, ритм и радиусы в источнике пусты —
   заданы здесь для лендинга, после проверки боем переносятся в источник. */

:root {
  /* --- ЦВЕТ (из источника) --- */
  --c-base:            #0D0D0F;
  --c-base-deep:       #0A0A0C;
  --c-surface:         #EDEAE4;
  --c-text:            var(--c-surface);
  --c-text-muted:      rgba(237, 234, 228, 0.62);   /* нет в источнике: второстепенный текст */
  --c-text-dim:        rgba(237, 234, 228, 0.78);   /* приглушённый, но читаемый: прошедшие остановки «Волн» */
  --c-accent:          #D97757;
  --c-accent-bright:   #E8734A;
  --c-accent-vivid:    #E8632B;
  --c-accent-2:        #C7CBD1;
  --c-accent-2-bright: #D9DDE2;
  --c-accent-2-vivid:  #DDE2E8;
  --c-graphite:        #1A1A1C;
  --c-line:            rgba(237, 234, 228, 0.10);   /* нет в источнике: линии, границы плашек */
  --c-card:            #141416;                     /* нет в источнике: плашка на базе */

  /* затемнение поверх поля точек: сверху едва, к низу экрана сильнее — там живёт текст */
  --g-dim:  linear-gradient(180deg, rgba(13,13,15,0.05) 0%, rgba(13,13,15,0.45) 100%);
  /* поле точек на фоне: размер точки, шаг сетки, сила (читает main.js) */
  --dots-size: 1.3;
  --dots-step: 14;
  --dots-alpha: 0.48;
  --dots-tint: 0.45;                  /* доля оранжа в тёплой фазе перелива (0 – только серебро) */
  --g-logo:      linear-gradient(90deg, var(--c-accent-vivid), var(--c-accent-2-vivid));
  --g-bright-bg: linear-gradient(90deg, var(--c-accent-bright), var(--c-accent-2-bright));
  /* свет на тёмном: оранж слева, серебро справа, тьма доминирует, свечение на грани заметности */
  --g-glow: radial-gradient(60% 50% at 8% 40%, rgba(217,119,87,0.10), transparent 70%),
            radial-gradient(50% 45% at 92% 60%, rgba(199,203,209,0.06), transparent 70%);
  --c-line-hover:      rgba(237, 234, 228, 0.38);   /* обводка плашки при наведении (dvdrod 0.38) */
  --c-glow:            rgba(217, 119, 87, 0.95);   /* нет в источнике: линия света по нижней кромке плашки */
  --c-glow-soft:       rgba(217, 119, 87, 0.22);   /* нет в источнике: отсвет внутри плашки от нижней кромки */
  --c-nav-glass:       var(--c-base);                 /* капсула шапки после прокрутки: в цвет базы, без стекла; отделяет обводка */
  --shadow-nav:        0 4px 24px rgba(0, 0, 0, 0.25); /* единственная тень раскладки */
  --blur-nav:          20px;
  --nav-backdrop:      none;   /* размытие фона снято (носитель 17.09): backdrop-filter в Chrome на Mac уводит весь кадр в сепию. Вернуть: blur(var(--blur-nav)) */

  /* --- ШРИФТ --- */
  --font-display: 'Unbounded', sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* --- КЕГЛИ (fluid: телефон 390 → десктоп 1440) --- */
  --fs-hero:  clamp(2.375rem, 0.82rem + 8.6vw, 8.75rem); /* до 140 px: плакат первого экрана как имя у dvdrod; телефон — ниже */
  --fs-section: clamp(2.5rem, 1rem + 6vw, 6.5rem);   /* 40 → 104 px: огромное слово в шапке секции (dvdrod §13) */
  --fs-h1:    clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  --fs-h2:    clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  --fs-lead:  clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);  /* 20 → 28 px: крупный текст сцены («Волны»), светлое на тёмном – интерлиньяж 1.3 */
  --fs-h3:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-body:  clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;              /* 11 px: подписи, капсулы, навигация */
  --fs-caption: 0.75rem;              /* 12 px: источник, сноски */
  --lh-display: 0.92;                 /* дисплей (dvdrod 0.88; Unbounded с выносными — 0.92) */
  --lh-tight: 1.08;
  --lh-body:  1.55;
  --ls-display: -0.04em;
  --ls-label:   0.12em;               /* подписи uppercase */

  /* --- РИТМ --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);
  --gutter: 1rem;                     /* боковой отступ на телефоне: 16 px */
  --nav-clearance: 6.5rem;            /* 104 px: верхний отступ липких сцен, чтобы капсула шапки не наезжала на заголовок */
  --gutter-desktop: 2.75rem;          /* 44 px, как у dvdrod; контейнера у первого экрана нет */

  --radius-pill: 999px;               /* капсулы: теги, статусы, мелкие кнопки */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;                   /* плашки в духе Apple */

  --maxw-text: 42rem;
  --maxw-page: 72rem;

  /* --- ЗЕРНО И ДВИЖЕНИЕ (dvdrod) --- */
  --grain-opacity: 0.028;             /* SVG-шум поверх всего: плёнка вместо свечений */
  --ease-reveal: cubic-bezier(0.215, 0.61, 0.355, 1);   /* ≈ power3.out: маска строк */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* общий hover */
  --dur-reveal:  1.05s;               /* маска строк, stagger 0.1s */
  --dur-bar:     1.4s;                /* полоса плеера до 1 % */
  --dur-nav:     0.45s;               /* шапка → капсула */
  --marquee-dur: 28s;                 /* бегущая строка, один круг */
  --dur-hover:   0.3s;
  --dur-open:    0.5s;                /* раскрытие плашки «Моста» */
  --ease-nav:    cubic-bezier(0.4, 0, 0.2, 1);
  --nav-scroll-threshold: 60;         /* px прокрутки, после которых шапка сжимается (читает main.js) */

  /* --- СЛОИ --- */
  --z-bg:    0;                       /* видеофон за всей страницей */
  --z-page:  1;
  --z-nav:   10;
  --z-grain: 20;                      /* зерно поверх всего, клики пропускает */
}

/* телефоны: кегль плаката строго от ширины, чтобы «использует ИИ» держалось одной строкой (390 → 37 px) */
@media (max-width: 599px) {
  :root { --fs-hero: 9.5vw; }
}

/* телефон (до 899 px), вторая сборка 18.09: второстепенный текст ярче (мелкий кегль на тёмном); плашка подписи поверх кадра «Волн»;
   заливка ответа настроенного Claude в «Мосте»; поле точек стилем, когда JS не запущен (просмотрщик файлов iPhone) */
@media (max-width: 899px) {
  :root {
    --c-text-muted:   rgba(237, 234, 228, 0.7);
    --c-scrim:        rgba(13, 13, 15, 0.8);
    --c-accent-wash:  rgba(217, 119, 87, 0.08);
    --c-dots-static:  rgba(199, 203, 209, 0.16);
    --section-y:      3.25rem;                     /* ритм секций плотнее: на телефоне пустоты между блоками читались как обрыв */
    --fs-body:        1.0625rem;                   /* текст на 1 px крупнее – для тех, кто видит хуже (носитель 19.09) */
    --fs-small:       0.9375rem;
    --fs-label:       0.75rem;
    --fs-caption:     0.8125rem;
  }
}