/* Гранд Эрмий — ВСЕ значения оформления темы.

   Здесь и только здесь стоят числа и цвета. В любом другом файле темы пишется
   `var(--…)`. Причина простая и проверяется стандартом: HEX, повторённый в файле
   компонента, невидим для того, кто правит палитру. Он поменяет токен, увидит, что
   половина страницы не изменилась, и пойдёт искать по файлам.

   Имя описывает НАЗНАЧЕНИЕ, а не значение: `--color-text-muted`, а не `--grey-3`.
   Иначе первая же смена палитры даёт `--grey-3: #4a3b2f`, и имя начинает врать.

   Слои каскада объявлены здесь же, потому что этот файл подключается первым
   (порядок задан в theme.json → styles). Порядок слоёв решает споры о важности
   вместо `!important`, которого в теме нет. */
@layer theme.settings, theme.base, theme.components, theme.state;

/* Шрифты бренда подключает ТЕМА: движок на страницу бренда ничего не кладёт,
   поэтому и семейство выбирает тот, кто рисует. */
@import url("/static/fonts/inter/face.css");
/* Archivo — styles/font-archivo.css (второй в theme.json → styles): без сдвига при загрузке. */
@layer theme.settings {
:root {
  /* текст */
  --color-text: #0f1a2b;
  --color-text-body: #43566e;
  --color-text-muted: #5c6e85;
  --color-text-subtle: #8a9aae;
  --color-text-disabled: #a9b4c2;
  --color-nav-current-bg: #0f1a2b;
  --color-nav-current-text: #ffffff;
  --color-backdrop: rgba(15, 26, 43, 0.55);
  --color-text-inverse: #ffffff;
  --color-text-on-dark: #c6d3e2;
  --color-text-on-dark-muted: #a9bdd6;
  --color-text-footer: #93a9c6;
  --color-text-footer-muted: #7c90ac;
  --color-text-error: #c0392b;

  /* поверхности */
  --color-bg-page: #ffffff;
  --color-bg-note: #fcf1e8;
  --color-bg-section-alt: #f4f6f9;
  --color-bg-tag-accent: #fcebdd;
  --color-bg-dark: #0f1a2b;
  --color-bg-accent-soft: #fcebdd;
  --color-bg-table-head: #f9fafc;

  /* границы */
  --color-border: #eceff4;
  --color-border-field: #e3e8ef;
  --color-border-strong: #dce3ec;
  --color-border-footer: #24344f;
  --color-border-card: #e7ecf3;
  --color-border-row: #f1f4f8;
  --color-border-divider: #dee4ec;
  --color-border-nav-line: #e3e8ef;
  --color-border-social: #35496a;
  --color-icon-muted: #c6cfda;

  /* акцент */
  --color-accent: #ed8a22;
  --color-accent-button: #bc5617;
  --color-accent-text: #a94e14;
  --color-accent-line: #f2c9ac;
  --color-button-sheen: rgba(255, 255, 255, .42);

  /* типографика и метрики исходного макета */
  --font-family-base: Archivo, sans-serif;
  --font-size-h1: clamp(27px, 3.4vw, 35.9px);
  --font-size-h2: clamp(20px, 2.5vw, 26.5px);
  --font-size-h3: clamp(15px, 1.9vw, 20.3px);
  --font-size-h4: 15.6px;
  --font-size-body: 13.5px;
  --font-size-small: 12px;
  --font-size-caption: 11.5px;
  --font-size-nav: 12px;
  --line-height-heading: 1.14;
  --line-height-body: 1.62;
  --letter-spacing-heading: -0.024em;

  /* сетка. Контейнер и колонки — единственные на всю тему. */
  --width-container: 1120px;
  --width-text: 820px;
  --width-sub-figure: 420px;
  --width-media-compact: 300px;
  --width-slot: 350px;
  --size-icon-badge: 44px;
  --size-icon: 24px;
  --space-slot-gap: clamp(24px, 4vw, 56px);
  --width-table: 960px;
  --width-table-min: 720px;
  --space-gutter: clamp(16px, 4vw, 28px);
  --space-section: clamp(40px, 6vw, 58px);
  --space-grid-row: 40px;
  --space-grid-col: 56px;
  --header-height: 50px;

  /* формы */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-card: 0 1px 2px rgba(15, 26, 43, .04), 0 8px 24px -12px rgba(15, 26, 43, .18);
  --shadow-hero: 0 1px 0 rgba(15, 26, 43, .05), 0 18px 44px -28px rgba(15, 26, 43, .28);
  --shadow-header: 0 1px 0 rgba(15, 26, 43, .06), 0 10px 26px -18px rgba(15, 26, 43, .35);
  --shadow-dropdown: 0 24px 54px rgba(15, 26, 43, .14);
  --shadow-promo: 0 24px 60px rgba(15, 26, 43, .22);
  --shadow-table: 0 2px 5px rgba(15, 26, 43, .05), 0 22px 52px -28px rgba(15, 26, 43, .34);
  --overlay-hero-photo: linear-gradient(90deg, rgba(15, 26, 43, .96) 0%, rgba(15, 26, 43, .92) 40%,
                                        rgba(15, 26, 43, .55) 66%, rgba(15, 26, 43, .15) 88%,
                                        rgba(15, 26, 43, .05) 100%);
  --overlay-hero-left: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .86) 40%,
                                        rgba(255, 255, 255, 0) 62%);
  --overlay-hero-top-mobile: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .86) 45%,
                                              rgba(255, 255, 255, 0) 70%);
  --height-hero-photo: clamp(500px, 44vw, 660px);
  --width-hero-text: 540px;
  --focus-ring: 0 0 0 3px rgba(15, 26, 43, .08);
}

/* CJK использует локальные варианты Noto, а не случайный системный fallback.
   Японский и упрощённый китайский разведены: формы одних и тех же иероглифов
   зависят от языка и не должны подменять друг друга. */
html:lang(ja) {
  --font-family-base: "Noto Sans JP Variable", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-size-body: 15px;
  --font-size-small: 13.5px;
  --font-size-caption: 12.5px;
  --font-size-nav: 13px;
  --line-height-heading: 1.34;
  --line-height-body: 1.78;
  --letter-spacing-heading: 0;
  --header-height: 58px;
}

html:lang(zh-CN) {
  --font-family-base: "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-size-body: 14.5px;
  --font-size-small: 13px;
  --font-size-caption: 12px;
  --font-size-nav: 13px;
  --line-height-heading: 1.3;
  --line-height-body: 1.72;
  --letter-spacing-heading: 0;
  --header-height: 56px;
}

html:lang(hi) {
  --font-family-base: "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
  --font-size-body: 15px;
  --font-size-small: 13.5px;
  --font-size-caption: 12.5px;
  --font-size-nav: 13px;
  --line-height-heading: 1.32;
  --line-height-body: 1.76;
  --letter-spacing-heading: 0;
  --header-height: 58px;
}
}