/* ============================================================================
   SHARK DEV — фирменные константы. Единственный источник истины для цвета,
   типографики и ритма. Ни один цвет за пределами этого файла не объявляется:
   `python3 scripts/extract-brand.py --verify` падает, если в index.html,
   в остальных CSS или в SVG логотипа найден HEX, которого здесь нет.

   Каждое значение снято из `art/Shark Dev_guideline.pdf` тем же скриптом,
   а не подобрано на глаз. У каждого цвета указана страница гайдлайна либо
   пометка, что он взят из заливки вектора логотипа.
   ============================================================================ */

:root {
  /* --- палитра гайдлайна, стр. 11 (четыре плашки, порядок как в гайдлайне) --- */
  --c-deep:  #0a003a; /* тёмный фиолетово-синий, гайдлайн стр. 11 */
  --c-ink:   #070b23; /* почти чёрный синий, основной фон, гайдлайн стр. 11 */
  --c-ice:   #c0fbff; /* светлый циан, акцент, гайдлайн стр. 11 */
  --c-paper: #e3f3fd; /* светлый голубой, основной текст на тёмном, гайдлайн стр. 11 */

  /* --- цвета логотипа: в палитре гайдлайна их нет, взяты из заливок вектора --- */
  --c-blue:  #0041a8; /* слово «SHARK», из вектора логотипа, стр. 4–5 */
  --c-cyan:  #00bcf4; /* слово «DEV», из вектора логотипа, стр. 4–5 */
  --c-mono:  #1d1d1b; /* монохромная версия логотипа, гайдлайн стр. 7 */

  /* --- градиент знака: mesh-шейдинг из PDF, снят по оси наибольшего изменения.
         Используется в SVG логотипа; здесь объявлен, чтобы тем же градиентом
         могли пользоваться фон и декоративные элементы страницы. --- */
  --logo-fin-0: #0171cb; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-1: #005fbd; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-2: #0038a2; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-3: #002292; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-4: #001d8d; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-5: #002490; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-6: #002f96; /* из вектора логотипа, mesh-градиент знака, стр. 4 */
  --logo-fin-hot: #00a6ea; /* из вектора логотипа, яркое пятно градиента знака, стр. 4 */
  --logo-lens-0: #0198fd; /* из вектора логотипа, блик знака, стр. 4 */
  --logo-lens-1: #03a8fd; /* из вектора логотипа, блик знака, стр. 4 */
  --logo-lens-2: #07c0fe; /* из вектора логотипа, блик знака, стр. 4 */
  --logo-lens-3: #0dbafe; /* из вектора логотипа, блик знака, стр. 4 */

  /* Не цвет бренда: белый нужен как значение канала в SVG-маске блика знака —
     маска в PDF задана яркостью, и белый там означает «полностью непрозрачно».
     Объявлен здесь только для того, чтобы правило «ни одного цвета вне tokens.css»
     оставалось буквально верным и проверяемым. */
  --mask-full: #ffffff;

  /* --- роли темы ---------------------------------------------------------

     Ниже — не цвета, а роли: «фон», «текст», «акцент». Сами значения ролей
     зависят от темы и переопределяются ниже по файлу. Вёрстка обязана обращаться
     только к ролям: любое прямое обращение к --c-ink или --c-ice из main.css
     означает элемент, который не переживёт смену темы.

     Тёмная тема — значения по умолчанию. Она выводится прямо из палитры
     гайдлайна: два тёмных цвета (--c-ink, --c-deep) против двух светлых
     акцентов (--c-paper, --c-ice). Светлая тема ниже так же законна: --c-paper
     в самом гайдлайне — фон его страниц.
     ---------------------------------------------------------------------- */

  --c-bg:           var(--c-ink);
  --c-bg-glow:      var(--c-deep);
  --c-veil:         color-mix(in srgb, var(--c-ink) 82%, transparent);
  --c-surface:      color-mix(in srgb, var(--c-deep) 55%, var(--c-ink));
  --c-surface-soft: color-mix(in srgb, var(--c-deep) 30%, var(--c-ink));
  --c-line:         color-mix(in srgb, var(--c-ice) 14%, transparent);
  --c-line-strong:  color-mix(in srgb, var(--c-ice) 28%, transparent);
  /* Граница элемента управления — отдельная роль от декоративной линии.
     WCAG 1.4.11 требует для неё 3:1 к фону, декоративной линии это не касается.
     28% давали 2.26:1, поэтому у контролов своя, более плотная линия. */
  --c-line-control: color-mix(in srgb, var(--c-ice) 38%, transparent);
  --c-text:         var(--c-paper);
  --c-text-dim:     color-mix(in srgb, var(--c-paper) 68%, transparent);
  --c-text-faint:   color-mix(in srgb, var(--c-paper) 58%, transparent);

  /* Акцент — заливка кнопки; акцентный текст — ссылки и выделенные надписи.
     Это разные роли: на тёмном фоне заливка может быть ярче текста, на светлом
     наоборот, и одним значением их не покрыть. */
  --c-accent:        var(--c-cyan);
  --c-accent-hover:  var(--c-ice);   /* заливка акцента под курсором: на тёмном — светлее */
  --c-accent-text:   var(--c-ice);
  --c-accent-soft:   color-mix(in srgb, var(--c-cyan) 16%, transparent);
  --c-on-accent:     var(--c-ink);   /* надпись поверх заливки акцентом */
  --c-on-brand:      var(--c-paper); /* надпись поверх фирменного синего */
  --c-shadow:        color-mix(in srgb, var(--c-ink) 72%, transparent);

  --grad-brand: linear-gradient(76deg, var(--logo-fin-0) 0%, var(--logo-fin-2) 36%,
                                var(--logo-fin-4) 64%, var(--logo-fin-6) 100%);
  --grad-accent: linear-gradient(90deg, var(--c-blue) 0%, var(--c-cyan) 100%);

  /* --- типографика: Inter, гайдлайн стр. 12–13.
         Гайдлайн задаёт ExtraBold 45 pt заголовки, SemiBold 30 pt подзаголовки,
         Regular 22 pt текст. Здесь те же три начертания и то же соотношение
         размеров, пересчитанное в текучую шкалу. --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
               "Helvetica Neue", "Arial", "Noto Sans", sans-serif;
  --fw-regular: 400;  /* Inter Regular,   гайдлайн стр. 12 */
  --fw-semibold: 600; /* Inter SemiBold,  гайдлайн стр. 12 */
  --fw-extrabold: 800;/* Inter ExtraBold, гайдлайн стр. 12 */

  --fs-hero:  clamp(2.125rem, 1.15rem + 4.2vw, 4.25rem);
  --fs-h2:    clamp(1.625rem, 1.05rem + 2.3vw, 2.75rem);
  --fs-h3:    clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  --fs-lead:  clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  --fs-body:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --tracking-tight: -0.02em; /* трекинг в гайдлайне 0; минус только на крупных кеглях */
  --tracking-wide: 0.08em;

  /* --- ритм и сетка --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  --container: 1200px;   /* верхний брейкпоинт совпадает с шириной контейнера */
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);
  --header-h: 4.5rem;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;

  /* --- защитное поле логотипа: модуль X равен ширине знака (гайдлайн стр. 8) --- */
  --logo-mark-ratio: 1.0468; /* 140.125 / 133.861 — истинные пропорции знака */
  --logo-clear-space: 1em;   /* в контейнере логотипа = 1 × ширина знака */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
}

/* ============================================================================
   Светлая тема — переопределение ролей.

   Новых цветов не вводится: всё собрано из той же палитры гайдлайна. Фон —
   --c-paper (#e3f3fd), тот самый, которым в гайдлайне залиты его собственные
   страницы. Поверхности карточек делаются не белым, а подмешиванием --c-ice:
   белого в палитре нет, и вводить его ради светлой темы значило бы завести
   цвет без источника.

   Акцент в светлой теме — --c-blue, а не --c-cyan: циан #00bcf4 на фоне
   #e3f3fd даёт около 1.9:1 и в роли текста нечитаем. Это тот же просчёт,
   на котором в августе откатывали градиент кнопки.

   Порядок правил важен. Сначала системная настройка (для тех, кто ничего не
   выбирал), затем явный выбор через data-theme — он должен побеждать систему
   в обе стороны. Без JS работает первый блок: страница остаётся полной.
   ============================================================================ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-bg:           var(--c-paper);
    --c-bg-glow:      color-mix(in srgb, var(--c-ice) 45%, var(--c-paper));
    --c-veil:         color-mix(in srgb, var(--c-paper) 86%, transparent);
    --c-surface:      color-mix(in srgb, var(--c-ice) 20%, var(--c-paper));
    --c-surface-soft: color-mix(in srgb, var(--c-ice) 10%, var(--c-paper));
    --c-line:         color-mix(in srgb, var(--c-ink) 16%, transparent);
    --c-line-strong:  color-mix(in srgb, var(--c-ink) 32%, transparent);
    --c-line-control: color-mix(in srgb, var(--c-ink) 47%, transparent);
    --c-text:         var(--c-ink);
    --c-text-dim:     color-mix(in srgb, var(--c-ink) 78%, transparent);
    --c-text-faint:   color-mix(in srgb, var(--c-ink) 62%, transparent);
    --c-accent:       var(--c-blue);
    --c-accent-hover: color-mix(in srgb, var(--c-ink) 30%, var(--c-blue)); /* на светлом — темнее */
    --c-accent-text:  var(--c-blue);
    --c-accent-soft:  color-mix(in srgb, var(--c-blue) 12%, transparent);
    --c-on-accent:    var(--c-paper);
    --c-on-brand:     var(--c-paper);
    --c-shadow:       color-mix(in srgb, var(--c-ink) 22%, transparent);
  }
}

:root[data-theme="light"] {
  --c-bg:           var(--c-paper);
  --c-bg-glow:      color-mix(in srgb, var(--c-ice) 45%, var(--c-paper));
  --c-veil:         color-mix(in srgb, var(--c-paper) 86%, transparent);
  --c-surface:      color-mix(in srgb, var(--c-ice) 20%, var(--c-paper));
  --c-surface-soft: color-mix(in srgb, var(--c-ice) 10%, var(--c-paper));
  --c-line:         color-mix(in srgb, var(--c-ink) 16%, transparent);
  --c-line-strong:  color-mix(in srgb, var(--c-ink) 32%, transparent);
  --c-line-control: color-mix(in srgb, var(--c-ink) 47%, transparent);
  --c-text:         var(--c-ink);
  --c-text-dim:     color-mix(in srgb, var(--c-ink) 78%, transparent);
  --c-text-faint:   color-mix(in srgb, var(--c-ink) 62%, transparent);
  --c-accent:       var(--c-blue);
  --c-accent-hover: color-mix(in srgb, var(--c-ink) 30%, var(--c-blue));
  --c-accent-text:  var(--c-blue);
  --c-accent-soft:  color-mix(in srgb, var(--c-blue) 12%, transparent);
  --c-on-accent:    var(--c-paper);
  --c-on-brand:     var(--c-paper);
  --c-shadow:       color-mix(in srgb, var(--c-ink) 22%, transparent);
}