/* Onest 5.3.1 · Fontsource · SIL OFL 1.1; provenance in fonts/NOTICE.md. */
@font-face {
  font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 400 600;
  src: url('./fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 400 600;
  src: url('./fonts/onest-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
 * Примерка пяти концептов на весь демо-стенд (требование 10, docs/specs/demo-stand/spec.md).
 * Слой стенда: исходники design-system/ и site/ не меняются. Файл подключает demo/assets/theme.js,
 * когда на <html> стоит data-concept="B"…"E". A «Лак и киноварь» — система как есть, правил для A нет.
 *
 * Откуда значения. Только компонент design-system/components/Directions (style="--g --ink --ink2 --acc
 * --seal --cta --pb --pbd --fd --fb --fm --r --pr --hw --hs --hc") и прототипы docs/directions/B–E.html
 * (палитра из пяти цветов). Строка @import — та же, что в Directions, без шрифтов F и G.
 *
 * Правило сочетания с темой (простое и предсказуемое):
 *   B/C/E задают собственные палитры на <html> и вложенных [data-theme]; ряд темы неактивен.
 *   A/D сохраняют выбранную системную тему. D по умолчанию — светлый jade, без перекраски токенов;
 *   jade-dark и явный выбор пользователя сохраняются. B/E — светлая база сравнения, C — тёмная.
 *
 * Как устроено. Блок концепта задаёт роли --c-* (фон, поверхности, текст, акцент, шрифты…).
 * Общий блок раскладывает роли на все семантические токены --bw-* и на примитивы, которые bundle.css
 * берёт напрямую (--bw-ink-*, --bw-paper-*, --bw-gold-*, --bw-cinnabar-*, --bw-lacquer-*, --bw-jade-*):
 *   тёмные примитивы системы (ink, lacquer, bronze, jade) → фон и поверхности концепта,
 *   светлые (paper, sand) → текст концепта, gold-200 → акцентный текст, gold-400 → акцентная заливка.
 * Так «тёмные острова» системы (мега-меню, фича-колонки, поп-ап, тост, чат) в светлом концепте
 * становятся поверхностью концепта с его тушью, а пары «текст — фон» всегда берутся из одного концепта.
 *
 * Контраст (WCAG, рассчитан по значениям; фон — --c-bg, поверхности — --c-surface/--c-surface-raised):
 *   B: текст #17161A 15.4 · вторичный и приглушённый #4A463F 8.0 (пепел #8C8579 из палитры даёт 3.1 —
 *      взят #4A463F, --ink2 того же концепта) · киноварь #C23B22 на бумаге 4.57 (eyebrow, курсив, ссылки).
 *   C: текст #F7F4EC 15.9 · вторичный #C9CDD3 11.0 · латунь #B8925A 6.1, на #16263C 5.3.
 *   D: контраст проверяется для канонических jade/jade-dark в demo/tests/theme.test.mjs.
 *   E: текст #141414 16.3 · вторичный #3A3A3A 10.1 · огонь #E4572E даёт 3.27 — для текста взята вода
 *      #1F4E8C (7.4); огонь остаётся в линиях, выделении и плашке стихии.
 *   B: поднятая поверхность — бумага #F2EDE3, а не --pb #E9E2D4 (киноварь на нём 4.13); #E9E2D4 — выделение и глубокий фон.
 * Значения не из Directions (палитра пяти цветов их не задаёт, без них текст стихий и статусов нечитаем):
 *   чернила стихий и статусы светлой базы — значения светлой темы paper из tokens.css (#2E6B47, #8A2A1A,
 *   #6B4E1E, #3B4045, #1F4E79, #B3261E, #F0D6CC); запасные значения C — тёмная тема lacquer;
 *   --c-disabled и чип стихии дня — color-mix цветов того же концепта.
 * Тени системы рассчитаны на тёмный фон и на светлом дают грязные «затенённые» места — в светлых
 * концептах они мягче (источник теней не задаёт, это служебная правка стенда).
 */

/* ---------- B · Тушь и рисовая бумага ---------- */
html[data-concept="B"] {
  --c-bg: #F2EDE3;
  --c-bg-deep: #E9E2D4;
  --c-surface: #F2EDE3;
  --c-surface-raised: #F2EDE3; /* --pb #E9E2D4 под киноварью даёт 4.13 — поверхности на бумаге, #E9E2D4 только в выделении */
  --c-surface-sunken: #F2EDE3;
  --c-line: #D6CCBA;
  --c-line-strong: #8C8579;
  --c-line-accent: rgba(194, 59, 34, 0.35);
  --c-text: #17161A;
  --c-text-2: #4A463F;
  --c-muted: #4A463F;
  --c-disabled: #8C8579;
  --c-eyebrow: #C23B22;
  --c-em: #C23B22;
  --c-accent-text: #17161A;
  --c-accent: #C23B22;
  --c-cta: #17161A;
  --c-cta-hover: #4A463F;
  --c-on-cta: #F2EDE3;
  --c-cta-disabled: #D6CCBA;
  --c-seal: #C23B22;
  --c-on-seal: #F2EDE3;
  --c-focus: #C23B22;
  --c-selected: #E9E2D4;
  --c-soft: #CAD6C9;
  --c-soft-deep: #E9E2D4;
  --c-on-dark: #F2EDE3;
  --c-glass: rgba(242, 237, 227, 0.9);
  --c-glass-strong: rgba(242, 237, 227, 0.97);
  --c-shadow: 23, 22, 26;
  --c-font-display: Forum, "Cormorant Garamond", serif;
  --c-font-ui: "Golos Text", Manrope, sans-serif;
  --c-font-mono: "IBM Plex Mono", monospace;
  /* характер: --r 2px, --pr 2px */
  --bw-radius-chip: 2px;
  --bw-radius-m: 2px;
  --bw-radius-card: 2px;
  --bw-radius-l: 2px;
}

/* ---------- C · Обсерватория ---------- */
html[data-concept="C"] {
  --c-bg: #0E1A2B;
  --c-bg-deep: #0A1320;
  --c-surface: #132235;
  --c-surface-raised: #16263C;
  --c-surface-sunken: #0A1320;
  --c-line: #2A3B52;
  --c-line-strong: rgba(184, 146, 90, 0.45);
  --c-line-accent: rgba(184, 146, 90, 0.3);
  --c-text: #F7F4EC;
  --c-text-2: #C9CDD3;
  --c-muted: #C9CDD3;
  --c-disabled: color-mix(in srgb, #C9CDD3 55%, #0E1A2B);
  --c-eyebrow: #B8925A;
  --c-em: #B8925A;
  --c-accent-text: #EDE6D6;
  --c-accent: #B8925A;
  --c-cta: #B8925A;
  --c-cta-hover: #EDE6D6;
  --c-on-cta: #0E1A2B;
  --c-cta-disabled: #2A3B52;
  --c-seal: #B8925A;
  --c-on-seal: #0E1A2B;
  --c-focus: #B8925A;
  --c-selected: rgba(184, 146, 90, 0.14);
  --c-on-dark: #F7F4EC;
  --c-glass: rgba(14, 26, 43, 0.88);
  --c-glass-strong: rgba(14, 26, 43, 0.97);
  --c-font-display: Spectral, Georgia, serif;
  --c-font-ui: "IBM Plex Sans", Manrope, sans-serif;
  --c-font-mono: "IBM Plex Mono", monospace;
  /* характер: --pr 4px, --r 6px */
  --bw-radius-chip: 4px;
  --bw-radius-m: 4px;
  --bw-radius-card: 4px;
  --bw-radius-l: 4px;
}

/* ---------- D · Нефрит и шёлк ---------- */
html[data-concept="D"][data-theme="jade"],
html[data-concept="D"] [data-theme="jade"] { color-scheme: light; }
html[data-concept="D"][data-theme="jade-dark"],
html[data-concept="D"] [data-theme="jade-dark"] { color-scheme: dark; }
html[data-concept="D"] {
  /* Палитра D — канонические jade/jade-dark из tokens.css, включая вложенные поверхности. */
  --font-display: Prata, Georgia, serif;
  --font-ui: Onest, Manrope, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

/* D text roles; leave decorative primitive colors unchanged. */
html[data-concept="D"] .bw-ink[style*="--bw-wood-ink"] > small { color: var(--bw-bg); }
html[data-concept="D"] .bw-price-text { color: var(--bw-em); }
html[data-concept="D"] .bw-card--featured .bw-eyebrow { --bw-gold-200: var(--bw-eyebrow); }
html[data-concept="D"] .bw-card--featured .bw-body { --bw-sand-200: var(--bw-text-2); }

/* ---------- E · Пять стихий · модерн ---------- */
html[data-concept="E"] {
  --c-bg: #F5F1E8;
  --c-bg-deep: #E3DED3;
  --c-surface: #FFFFFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunken: #F5F1E8;
  --c-line: #E3DED3;
  --c-line-strong: rgba(20, 20, 20, 0.35);
  --c-line-accent: rgba(228, 87, 46, 0.55);
  --c-text: #141414;
  --c-text-2: #3A3A3A;
  --c-muted: #3A3A3A;
  --c-disabled: color-mix(in srgb, #3A3A3A 50%, #F5F1E8);
  --c-eyebrow: #1F4E8C;
  --c-em: #1F4E8C;
  --c-accent-text: #1F4E8C;
  --c-accent: #1F4E8C;
  --c-cta: #141414;
  --c-cta-hover: #3A3A3A;
  --c-on-cta: #F5F1E8;
  --c-cta-disabled: #E3DED3;
  --c-seal: #141414;
  --c-on-seal: #F5F1E8;
  --c-focus: #1F4E8C;
  --c-selected: rgba(228, 87, 46, 0.12);
  --c-soft: #E3DED3;
  --c-soft-deep: #FFFFFF;
  --c-on-dark: #F5F1E8;
  --c-glass: rgba(245, 241, 232, 0.9);
  --c-glass-strong: rgba(245, 241, 232, 0.97);
  --c-shadow: 20, 20, 20;
  --c-font-display: Unbounded, Manrope, sans-serif;
  --c-font-ui: Onest, Manrope, sans-serif;
  --c-font-mono: "IBM Plex Mono", monospace;
  /* плашки стихий из палитры E */
  --c-wood: #2E8B57;
  --c-fire: #E4572E;
  --c-earth: #E9B949;
  --c-water: #1F4E8C;
  --c-water-ink: #1F4E8C;
  /* характер: --pr 6px, --r 8px */
  --bw-radius-chip: 6px;
  --bw-radius-m: 6px;
  --bw-radius-card: 6px;
  --bw-radius-l: 6px;
}

/* ---------- Светлая база (B, E): элементы, статусы и тени как в светлой теме системы ---------- */
html[data-concept="B"],
html[data-concept="E"] {
  --c-wood-ink: #2E6B47;
  --c-fire-ink: #8A2A1A;
  --c-earth-ink: #6B4E1E;
  --c-metal-ink: #3B4045;
  --c-accent-live: #6B4E1E;
  --c-success: #2E6B47;
  --c-success-soft: rgba(46, 107, 71, 0.1);
  --c-on-success-soft: #2E6B47;
  --c-danger: #B3261E;
  --c-danger-text: #8A2A1A;
  --c-danger-soft: #F0D6CC;
}
html[data-concept="B"] { --c-water-ink: #1F4E79; }

html[data-concept="B"],
html[data-concept="B"] [data-theme],
html[data-concept="E"],
html[data-concept="E"] [data-theme] {
  --bw-shadow-cta: inset 0 0 0 1px rgba(var(--c-shadow), 0.12), 0 10px 24px rgba(var(--c-shadow), 0.14);
  --bw-shadow-cta-inset: inset 0 0 0 1px rgba(var(--c-shadow), 0.12);
  --bw-shadow-cta-hover: inset 0 0 0 1px rgba(var(--c-shadow), 0.2), 0 8px 20px rgba(var(--c-shadow), 0.14);
  --bw-shadow-featured: 0 20px 50px rgba(var(--c-shadow), 0.12);
  --bw-shadow-glass: none;
  --bw-shadow-modal: 0 30px 70px rgba(var(--c-shadow), 0.18);
  --bw-shadow-page: 0 20px 40px rgba(var(--c-shadow), 0.12);
  --bw-shadow-pillar: 0 20px 40px rgba(var(--c-shadow), 0.12);
  --bw-shadow-device: 0 0 0 1px var(--c-line), 0 30px 60px rgba(var(--c-shadow), 0.16);
  --bw-scrim: rgba(var(--c-shadow), 0.35);
  --bw-grain: 0.05;
}

/* ---------- Раскладка палитр сравнения B/C/E на токены системы ---------- */
html:is([data-concept="B"], [data-concept="C"], [data-concept="E"]),
html:is([data-concept="B"], [data-concept="C"], [data-concept="E"]) [data-theme] {
  /* семантические */
  --bw-bg: var(--c-bg);
  --bw-bg-deep: var(--c-bg-deep);
  --bw-surface: var(--c-surface);
  --bw-surface-raised: var(--c-surface-raised);
  --bw-surface-sunken: var(--c-surface-sunken);
  --bw-field: var(--c-surface-sunken);
  --bw-line: var(--c-line);
  --bw-line-strong: var(--c-line-strong);
  --bw-line-gold: var(--c-line-accent);
  --bw-text: var(--c-text);
  --bw-text-2: var(--c-text-2);
  --bw-muted: var(--c-muted);
  --bw-disabled: var(--c-disabled);
  --bw-eyebrow: var(--c-eyebrow);
  --bw-em: var(--c-em);
  --bw-link: var(--c-em);
  --bw-cta: var(--c-cta);
  --bw-cta-hover: var(--c-cta-hover);
  --bw-on-cta: var(--c-on-cta);
  --bw-cta-disabled: var(--c-cta-disabled);
  --bw-seal: var(--c-seal);
  --bw-on-seal: var(--c-on-seal);
  --bw-focus: var(--c-focus);
  --bw-focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-focus);
  --bw-selected: var(--c-selected);
  --bw-success: var(--c-success, #6FA58C);
  --bw-success-soft: var(--c-success-soft, rgba(111, 165, 140, 0.12));
  --bw-on-success-soft: var(--c-on-success-soft, #D8E8DF);
  --bw-danger: var(--c-danger, #D2452E);
  --bw-danger-text: var(--c-danger-text, #EE8F6F);
  --bw-danger-soft: var(--c-danger-soft, rgba(179, 38, 30, 0.25));
  --bw-glass: var(--c-glass);
  --bw-glass-strong: var(--c-glass-strong);
  --bw-glass-border: var(--c-line);
  --bw-on-glass: var(--c-text);

  /* примитивы, которые bundle.css берёт напрямую */
  --bw-obsidian: var(--c-bg-deep);
  --bw-ink-950: var(--c-bg);
  --bw-ink-900: var(--c-surface);
  --bw-ink-800: var(--c-surface-raised);
  --bw-ink-700: var(--c-line);
  --bw-ink-600: var(--c-line);
  --bw-ink-500: var(--c-line);
  --bw-paper-50: var(--c-text);
  --bw-paper-100: var(--c-surface-raised);
  --bw-paper-200: var(--c-line);
  --bw-paper-300: var(--c-line);
  --bw-paper-400: var(--c-line-strong);
  --bw-sand-200: var(--c-text-2);
  --bw-sand-400: var(--c-muted);
  --bw-sand-500: var(--c-disabled);
  --bw-gold-200: var(--c-accent-text);
  --bw-gold-400: var(--c-accent);
  --bw-cinnabar-500: var(--c-seal);
  --bw-cinnabar-400: var(--c-cta-hover);
  --bw-cinnabar-900: var(--c-cta-disabled);
  --bw-lacquer-500: var(--c-surface-raised);
  --bw-lacquer-700: var(--c-bg-deep);
  --bw-bronze-400: var(--c-surface-raised);
  --bw-bronze-600: var(--c-em);
  --bw-jade-100: var(--c-text-2);
  --bw-jade-200: var(--c-text-2);
  --bw-jade-400: var(--c-line-strong);
  --bw-jade-700: var(--c-soft, #2C5A48);
  --bw-jade-850: var(--c-soft-deep, #12281F);
  --bw-jade-900: var(--c-soft-deep, #0E1F19);
  --bw-jade-950: var(--c-soft-deep, #08120E);
  /* умбра — текст на листе --bw-paper-50; лист переворачивается вместе с paper-50, умбра — в обратную сторону */
  --bw-umber-700: var(--c-surface-raised);
  --bw-umber-800: var(--c-surface);
  --bw-umber-900: var(--c-bg);
  --bw-observatory-950: var(--c-bg-deep);
  --bw-observatory-200: var(--c-text-2);
  --bw-accent-live: var(--c-accent-live, #B8873B);

  /* стихии: плашки — только у E, тексты — по светлой или тёмной базе */
  --bw-wood: var(--c-wood, #3E8E5E);
  --bw-fire: var(--c-fire, #D2452E);
  --bw-earth: var(--c-earth, #B8873B);
  --bw-water: var(--c-water, #1F4E79);
  --bw-wood-ink: var(--c-wood-ink, #8DBF9A);
  --bw-fire-ink: var(--c-fire-ink, #EE8F6F);
  --bw-earth-ink: var(--c-earth-ink, #D9B97A);
  --bw-metal-ink: var(--c-metal-ink, #D7DCE0);
  --bw-water-ink: var(--c-water-ink, #6E93B8);

  /* шрифты */
  --font-display: var(--c-font-display);
  --font-ui: var(--c-font-ui);
  --font-mono: var(--c-font-mono);
}

/* Мега-меню задаёт свои токены на .bw-mega__panel (тёмный остров системы). В концепте остров —
   поверхность концепта, все его токены из того же концепта. */
html:is([data-concept="B"], [data-concept="C"], [data-concept="E"]) .bw-mega__panel {
  --bw-text: var(--c-text);
  --bw-text-2: var(--c-text-2);
  --bw-muted: var(--c-muted);
  --bw-eyebrow: var(--c-eyebrow);
  --bw-em: var(--c-em);
  --bw-link: var(--c-em);
  --bw-line: var(--c-line);
  --bw-selected: var(--c-selected);
  --bw-focus: var(--c-focus);
  --bw-cta: var(--c-cta);
  --bw-cta-hover: var(--c-cta-hover);
  --bw-on-cta: var(--c-on-cta);
}

/* Обложки на тёмной заливке стихии (--el-deep/--el-abyss) остаются тёмными: текст светлый. */
html:is([data-concept="B"], [data-concept="C"], [data-concept="E"]) .bw-cover {
  color: var(--c-on-dark);
}

/* Чип «стихия дня»: рантайм ставит --bw-accent-live инлайном (заливка стихии). На светлой базе
   заливка как текст не дотягивает до 4.5 — текст сводится к туши концепта, оттенок стихии остаётся. */
html:is([data-concept="B"], [data-concept="E"]) .bw-chip--month {
  color: color-mix(in srgb, var(--bw-accent-live) 55%, var(--c-text));
}

/* ---------- Характер ---------- */
html[data-concept="C"] body {
  background-image: radial-gradient(80% 90% at 75% 45%, #16263C 0%, #0E1A2B 60%, #0A1320 100%);
  background-attachment: fixed;
}

html[data-concept="B"] .bw-btn { border-radius: 2px; }
html[data-concept="C"] .bw-btn { border-radius: 6px; }
html[data-concept="E"] .bw-btn { border-radius: 8px; }

/* C: заголовки светлым начертанием (--hw 300) */
html[data-concept="C"] :is(.bw-display, .bw-display-m, .bw-h1, .bw-h1-m, .bw-h2, .bw-h2-m) {
  font-weight: 300;
}

/* E: заголовки жирные, прописные, плотнее (--hw 700, --hc uppercase, --ht -.01em); --hs 52px против 72px у A,
   поэтому размеры заголовков ×0,72 — Unbounded широкий. */
html[data-concept="E"] :is(.bw-display, .bw-display-m, .bw-h1, .bw-h1-m, .bw-h2, .bw-h2-m) {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
html[data-concept="E"] .bw-display { font-size: clamp(32px, 5.3vw, 78px); }
html[data-concept="E"] .bw-h1 { font-size: clamp(28px, 3.6vw, 52px); }
html[data-concept="E"] .bw-h2 { font-size: clamp(22px, 2.45vw, 35px); }