/* Hallmark · CC Performance — design tokens
 * theme: фирменная палитра Champions Choice — снята с сертификата замера,
 *        чтобы приложение, документ и сайт читались как одно агентство.
 * взято от прежней темы: тёмная поверхность, глубина светлотой, узкий капс,
 *        карточка с фото, нижние вкладки. Заменена только палитра и знак.
 * paper: oklch(22.3% 0.051 259.4) = #0c1b33 · accent: oklch(56% 0.213 24.8) = #d51e2c
 * display: Oswald · wordmark: Anton · body: IBM Plex Sans
 * axes: dark / display-condensed-bold / warm
 */

:root{
  /* ---- COLOUR --------------------------------------------------------
     Глубина делается светлотой, а не тенями: чем выше слой, тем светлее.
     Все синие — один фирменный тон #0c1b33, разведённый по светлоте. */
  --color-paper:       oklch(22.3% 0.051 259.4);  /* #0c1b33 — тёмно-синий с бланка */
  --color-paper-2:     oklch(25.8% 0.062 264.2);  /* #142241 */
  --color-paper-3:     oklch(30.8% 0.074 263.9);  /* #1c2e55 */
  --color-rule:        oklch(36.6% 0.078 264.8);  /* #2a3d68 */
  --color-rule-2:      oklch(31.6% 0.073 264.8);  /* #1f3057 */
  --color-ink:         oklch(98.4% 0.005 258.3);  /* #f8fafd — белая бумага бланка */
  --color-ink-2:       oklch(87.0% 0.029 259.6);  /* #c9d5e8 */
  --color-muted:       oklch(78.4% 0.045 259.2);  /* #a8bad6 — подписи на бланке */

  /* Красный живёт в двух ролях, и это не прихоть, а контраст:
     фирменный #d51e2c на тёмно-синем даёт 3.3:1 — мелкий текст им набирать нельзя.
     ЗАЛИВКА (кнопки, клин, полосы) — ровно фирменный, белый на нём 5.2:1.
     ТЕКСТ (капсовые подписи, активная вкладка) — тот же тон светлее, 5.5:1. */
  --color-accent:      oklch(56.0% 0.213 24.8);   /* #d51e2c — заливки */
  --color-accent-text: oklch(68.1% 0.177 19.8);   /* #f2626a — акцентный текст */
  --color-accent-2:    oklch(50.3% 0.190 24.2);   /* #b81927 — нажатая кнопка */
  --color-accent-soft: oklch(24.9% 0.064 12.3);   /* тёмная подложка под акцентный текст */
  --color-accent-ink:  oklch(100%  0     0);      /* белый — текст поверх заливки */
  --color-focus:       oklch(72.2% 0.151 18.6);   /* #f57a80 */
  /* затемнение поверх фотографии, чтобы текст читался всегда */
  --scrim-strong: linear-gradient(180deg,
      oklch(22.3% 0.051 259.4 / .35) 0%, oklch(22.3% 0.051 259.4 / .72) 55%, var(--color-paper) 100%);
  --scrim-soft:   linear-gradient(180deg,
      oklch(22.3% 0.051 259.4 / .45), oklch(22.3% 0.051 259.4 / .94));
  /* печать: бумага белая независимо от темы */
  --print-paper: #ffffff;
  --print-ink:   #14161c;
  --print-rule:  #c2c6cf;

  /* ---- TYPE ----------------------------------------------------------
     Две гарнитуры. Oswald — узкий тяжёлый капс, несёт заголовки и цифры.
     IBM Plex Sans — текст и подписи. Обе с полной кириллицей.          */
  /* IBM Plex Sans в конце цепочки не декоративен: у Oswald нет знака ₸,
     и без запасного шрифта тенге рисуется случайной системной гарнитурой. */
  --font-display: 'Oswald', 'Arial Narrow', 'IBM Plex Sans', sans-serif;
  --font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  /* Название агентства везде латиницей и всегда Anton — как на сертификате.
     Кириллицы в шрифте нет, но она в названии и не нужна. */
  --font-wordmark:'Anton', 'Oswald', sans-serif;

  --text-3xs:  0.625rem;
  --text-2xs:  0.6875rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-md:   1.1875rem;
  --text-lg:   1.5rem;
  --text-xl:   1.875rem;
  --text-2xl:  2.375rem;
  --text-display:   clamp(2.25rem, 7vw + 0.4rem, 3.75rem);
  --text-display-s: clamp(1.75rem, 4.5vw + 0.5rem, 2.5rem);

  /* ---- SPACE (4pt) ---------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* ---- SHAPE ---------------------------------------------------------- */
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --rule-hair:   1px;
  --rule-thick:  2px;

  /* ---- MOTION --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 90ms;
  --dur-short:   160ms;
  --dur-med:     260ms;

  /* ---- ELEVATION ------------------------------------------------------ */
  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-nav: 30; --z-overlay: 40;

  /* ---- APP CHROME ----------------------------------------------------- */
  --tabbar-h: 4.25rem;
  --topbar-h: 4.25rem;
  --rail-w: 15rem;
}