/* ============================================================================
   CCTP — Design Tokens
   Cascade:  brand (primitives) → alias → mapped (roles) → type → layout
   Theming:  :root = Light · [data-theme-section="dark"] = Dark
   ============================================================================ */

:root {
  /* ---- BRAND · color · orange --------------------------------------------- */
  --brand-orange-50: #ffefea;
  --brand-orange-100: #ffccbd;
  --brand-orange-200: #ffb49d;
  --brand-orange-300: #fe9170;
  --brand-orange-400: #fe7c55;
  --brand-orange-500: #fe5b2a;
  --brand-orange-600: #e75326;
  --brand-orange-700: #b4411e;
  --brand-orange-800: #8c3217;
  --brand-orange-900: #6b2612;

  /* ---- BRAND · color · grey ----------------------------------------------- */
  --brand-grey-100: #eff0f1;
  --brand-grey-150: #e0e1e3;
  --brand-grey-200: #c3c4c8;
  --brand-grey-250: #b5b5b5;
  --brand-grey-300: #a3a3a4;
  --brand-grey-400: #8b8c8d;
  --brand-grey-500: #747576;
  --brand-grey-600: #464749;
  --brand-grey-700: #2f3032;
  --brand-grey-750: #222326;
  --brand-grey-800: #18191b;
  --brand-grey-850: #141415;
  --brand-grey-900: #0c0c0c;
  --brand-grey-100-alpha: #eff0f11a;
  --brand-grey-900-alpha: #0c0c0c1a;

  /* ---- BRAND · scale (em — Osmo fluid system) ----------------------------- */
  --brand-scale-0: 0em;
  --brand-scale-25: 0.0625em;
  --brand-scale-50: 0.125em;
  --brand-scale-100: 0.25em;
  --brand-scale-200: 0.5em;
  --brand-scale-300: 0.75em;
  --brand-scale-400: 1em;
  --brand-scale-500: 1.25em;
  --brand-scale-600: 1.5em;
  --brand-scale-700: 1.75em;
  --brand-scale-800: 2em;
  --brand-scale-900: 2.5em;
  --brand-scale-1000: 3em;
  --brand-scale-1100: 4em;
  --brand-scale-1200: 5em;
  --brand-scale-1300: 6.25em;
  --brand-scale-1400: 8.25em;
  --brand-scale-1500: 10.25em;

  /* ---- BRAND · type primitives -------------------------------------------- */
  --brand-font-family: "ABC Monument Grotesk", Arial, sans-serif;
  --brand-weight-light: 300;
  --brand-weight-regular: 400;
  --brand-weight-medium: 500;
  --brand-weight-bold: 700;

  /* ---- ALIAS · brand → orange --------------------------------------------- */
  --alias-brand-50: var(--brand-orange-50);
  --alias-brand-100: var(--brand-orange-100);
  --alias-brand-200: var(--brand-orange-200);
  --alias-brand-300: var(--brand-orange-300);
  --alias-brand-400: var(--brand-orange-400);
  --alias-brand-500: var(--brand-orange-500);
  --alias-brand-600: var(--brand-orange-600);
  --alias-brand-700: var(--brand-orange-700);
  --alias-brand-800: var(--brand-orange-800);
  --alias-brand-900: var(--brand-orange-900);

  /* ---- ALIAS · grey → brand-grey ------------------------------------------ */
  --alias-grey-100: var(--brand-grey-100);
  --alias-grey-150: var(--brand-grey-150);
  --alias-grey-200: var(--brand-grey-200);
  --alias-grey-250: var(--brand-grey-250);
  --alias-grey-300: var(--brand-grey-300);
  --alias-grey-400: var(--brand-grey-400);
  --alias-grey-500: var(--brand-grey-500);
  --alias-grey-600: var(--brand-grey-600);
  --alias-grey-700: var(--brand-grey-700);
  --alias-grey-750: var(--brand-grey-750);
  --alias-grey-800: var(--brand-grey-800);
  --alias-grey-850: var(--brand-grey-850);
  --alias-grey-900: var(--brand-grey-900);

  /* ---- MAPPED · text ------------------------------------------------------ */
  --mapped-text-headings-inverse: var(--alias-grey-100);
  --mapped-text-body-light: var(--alias-grey-500);
  --mapped-text-body-inverse: var(--alias-grey-200);
  --mapped-text-on-action: var(--alias-grey-900);
  --mapped-text-action: var(--alias-brand-500);
  --mapped-text-action-hover: var(--alias-brand-600);
  --mapped-text-disabled: var(--alias-grey-500);
  --mapped-text-warning: var(--alias-brand-800);
  --mapped-text-error: #fe2a2a;
  --mapped-text-success: #7bfe2a;

  /* ---- MAPPED · surface --------------------------------------------------- */
  --mapped-surface-dark: var(--alias-grey-800);
  --mapped-surface-action: var(--alias-brand-500);
  --mapped-surface-action-hover: var(--alias-brand-600);
  --mapped-surface-light-150: var(--alias-grey-150);
  --mapped-surface-light-200: var(--alias-grey-200);
  --mapped-surface-disabled: var(--alias-grey-200);
  --mapped-surface-warning: var(--alias-brand-800);
  --mapped-surface-transparent-black: var(--brand-grey-900-alpha);
  --mapped-surface-transparent-white: var(--brand-grey-100-alpha);
  --mapped-surface-error: #ffcccc;
  --mapped-surface-success: #e0ffcc;

  /* ---- MAPPED · border ---------------------------------------------------- */
  --mapped-border-action: var(--alias-brand-600);
  --mapped-border-action-hover: var(--alias-brand-700);
  --mapped-border-inverse: var(--alias-grey-700);
  --mapped-border-on-200: var(--alias-grey-300);
  --mapped-border-disabled: var(--alias-grey-200);
  --mapped-border-warning: var(--alias-brand-800);
  --mapped-border-error: #fe2a2a;
  --mapped-border-success: #7bfe2a;

  /* ---- MAPPED · icon ------------------------------------------------------ */
  --mapped-icon-inverse: var(--alias-grey-100);
  --mapped-icon-action: var(--alias-brand-500);
  --mapped-icon-action-hover: var(--alias-brand-600);
  --mapped-icon-on-action: var(--alias-grey-900);
  --mapped-icon-disabled: var(--alias-grey-500);
  --mapped-icon-warning: var(--alias-brand-800);
  --mapped-icon-error: #fe2a2a;
  --mapped-icon-success: #7bfe2a;

  /* ---- MAPPED · padding --------------------------------------------------- */
  --mapped-padding-none: var(--brand-scale-0);
  --mapped-padding-xxs: var(--brand-scale-200);
  --mapped-padding-xs: var(--brand-scale-400);
  --mapped-padding-sm: var(--brand-scale-800);
  --mapped-padding-md: var(--brand-scale-1100);
  --mapped-padding-lg: var(--brand-scale-1200);
  --mapped-padding-xl: var(--brand-scale-1500);

  /* ---- MAPPED · radius ---------------------------------------------------- */
  --mapped-radius-none: 0em;
  --mapped-radius-sm: 0.125em;
  --mapped-radius-md: 0.25em;
  --mapped-radius-lg: 0.5em;

  /* ---- MAPPED · border-width ---------------------------------------------- */
  --mapped-border-width-none: 0em;
  --mapped-border-width-sm: 0.0625em;
  --mapped-border-width-md: 0.125em;
  --mapped-border-width-lg: 0.25em;

  /* ---- MAPPED · theme (Light defaults — Dark overrides at the bottom) ----- */
  --mapped-text-headings: var(--alias-grey-900);
  --mapped-text-body: var(--alias-grey-700);
  --mapped-surface-page: var(--alias-grey-100);
  --mapped-surface-default: var(--alias-grey-100);
  --mapped-border-default: var(--alias-grey-200);
  --mapped-icon-default: var(--alias-grey-600);

  /* ---- TYPE · size + line-height (line-height unitless ratio) ------------- */
  --type-display-md-size: 6em;
  --type-display-md-lh: 1;
  --type-display-sm-size: 4.75em;
  --type-display-sm-lh: 1;
  --type-h1-size: 3.75em;
  --type-h1-lh: 0.933;
  --type-h2-size: 3em;
  --type-h2-lh: 1.021;
  --type-h3-size: 2.5em;
  --type-h3-lh: 1;
  --type-h4-size: 2em;
  --type-h4-lh: 1.125;
  --type-h5-size: 1.5em;
  --type-h5-lh: 1.167;
  --type-h6-size: 1.2em;
  --type-h6-lh: 1.2;
  --type-paragraph-lg-size: 1.25em;
  --type-paragraph-lg-lh: 1.2;
  --type-paragraph-md-size: 1em;
  --type-paragraph-md-lh: 1.25;
  --type-paragraph-sm-size: 0.875em;
  --type-paragraph-sm-lh: 1.429;
  --type-paragraph-xsm-size: 0.75em;
  --type-paragraph-xsm-lh: 1.333;
  --type-eyebrow-size: 0.75em;
  --type-eyebrow-lh: 1.143;

  /* ---- LAYOUT ------------------------------------------------------------- */
  --layout-nav-height: 4.375em;
  --layout-section-viewport: calc(100svh - var(--layout-nav-height));
}

/* ============================================================================
   Dark theme — overrides the 6 theme-mapped tokens. Driven by the
   data-theme-section attribute. "hero" is a visually-dark section (dark video
   bg) that uses the same dark token set; only its nav treatment differs.
   ============================================================================ */
[data-theme-section="dark"],
[data-theme-section="hero"] {
  --mapped-text-headings: var(--alias-grey-100);
  --mapped-text-body: var(--alias-grey-200);
  --mapped-surface-page: var(--alias-grey-800);
  --mapped-surface-default: var(--alias-grey-800);
  --mapped-border-default: var(--alias-grey-700);
  --mapped-icon-default: var(--alias-grey-100);
}

/* ============================================================================
   MOBILE spacing — пропорциональное уменьшение brand-scale на ≤767px.

   Почему здесь, а не в компонентах: brand-scale — единый корень ВСЕГО
   spacing (mapped-padding-* ссылаются на него + 68 прямых gaps/margins).
   Переопределяя scale в одном @media, ужимаем весь spacing сайта сразу.

   Почему вообще нужно: Osmo Scaling System держит 1em≈16px и на desktop
   (ideal 1440), и на мобилке (ideal 550/390) — т.е. desktop-пропорции
   отступов тащатся на телефон (container 64px на 390px экране).

   Прогрессия: малые ступени (0–100) почти не трогаем — это мелкие
   внутренние отступы, на мобилке норм. Средние плавно ×0.6–0.75.
   Большие (800+) ×~0.5. Монотонность сохранена.

   ЯКОРЬ spacing: scale-800 (2em → 1em). На ≤479px .container →
   mapped-padding-sm → scale-800, поэтому горизонтальный padding контейнера
   станет 1em.

   ТИП (--type-*-size): ужимаем ТОЛЬКО крупные заголовки h1–h4 (+ display,
   они крупнее h1). h5/h6/параграфы/body/eyebrow остаются как на десктопе
   (per user: «от h1 до h4 нужно изменять. После h4 уже менять шрифт не
   обязательно вообще никакой ... боди остается такой же как на десктопе»).
   Якорь: h2 3em → 2.2em (×0.733). Line-height (--type-*-lh) НЕ трогаем —
   unitless ratio, масштабируется вместе с size.
   ============================================================================ */
@media screen and (max-width: 767px) {
  :root {
    /* ---- spacing ---- */
    --brand-scale-0: 0em;
    --brand-scale-25: 0.0625em;
    --brand-scale-50: 0.125em;
    --brand-scale-100: 0.25em;
    --brand-scale-200: 0.375em; /* 0.5em  ×0.75 */
    --brand-scale-300: 0.5em; /* 0.75em ×0.67 */
    --brand-scale-400: 0.625em; /* 1em    ×0.625 */
    --brand-scale-500: 0.75em; /* 1.25em ×0.6 */
    --brand-scale-600: 0.875em; /* 1.5em  ×0.58 */
    --brand-scale-700: 0.9375em; /* 1.75em ×0.54 */
    --brand-scale-800: 1em; /* 2em    ×0.5  ← ЯКОРЬ (container) */
    --brand-scale-900: 1.25em; /* 2.5em  ×0.5 */
    --brand-scale-1000: 1.5em; /* 3em    ×0.5 */
    --brand-scale-1100: 2em; /* 4em    ×0.5 */
    --brand-scale-1200: 2.5em; /* 5em    ×0.5 */
    --brand-scale-1300: 3em; /* 6.25em ×0.48 */
    --brand-scale-1400: 3.75em; /* 8.25em ×0.45 */
    --brand-scale-1500: 4.5em; /* 10.25em ×0.44 */

    /* ---- type · size — только крупные заголовки h1–h4 (+ display, т.к.
       они крупнее h1 → иначе hero overflow на мобилке). h5/h6/параграфы/
       body/eyebrow держим как на десктопе (per user 2026-05-28). ---- */
    --type-display-md-size: 3.5em; /* 6em     ×0.58 */
    --type-display-sm-size: 2.9em; /* 4.75em  ×0.61 */
    --type-h1-size: 2.2em; /* 3.75em  ×0.59 (мобилка: длинные слова влезают) */
    --type-h2-size: 2em; /* 3em     ×0.733 ← ЯКОРЬ */
    --type-h3-size: 1.8em; /* 2.5em   ×0.76 */
    --type-h4-size: 1.6em; /* 2em     ×0.8 */
    /* h5, h6, paragraph-*, eyebrow — НЕ тронуты (= десктоп, per user) */
  }
}