/**
 * LandLords: Epos — Canonical Design Tokens
 *
 * SINGLE SOURCE OF TRUTH for ALL CSS custom properties consumed by
 * ladder, viewer, HUD, app-shell, and all frontend parts.
 *
 * Layer architecture: reset → tokens → layout → components → utilities
 *
 * Imported by:
 *   www/css/core/variables.css → www/css/design-tokens.css
 *   www/ladder/css/core/variables.css → www/css/design-tokens.css
 *
 * WHY ONLY 3 FILES IMPORT THIS (of 59 CSS files):
 * The ladder, admin, and HUD CSS bundles are isolated TypeScript compilation
 * units (`ladder/tsconfig.json`, `ladder/tsconfig.admin.json`, `hud/tsconfig.json`).
 * Each has its own `core/variables.css` that acts as a single import gateway —
 * all other CSS files in that bundle inherit tokens via CSS custom property
 * cascade, not via repeated @import. This avoids duplicate imports in bundled
 * output and keeps the dependency graph a tree. The 3 importers are the 3
 * bundle entry points: viewer.css, ladder core/variables.css, viewer core/variables.css.
 *
 * DO NOT define the same token elsewhere. Extend here only.
 *
 * @version 3.1.0
 * @last-modified 2026-10-05
 */

/* Explicit cascade layer order — declared before any layer is used.
   reset < tokens < layout < components < utilities.
   Page CSS lives in `layout`, ui-kit components in `components`, so
   ui-kit always wins over per-page layout regardless of load order.
   (Unlayered page CSS would otherwise beat layered ui-kit components.) */
@layer reset, tokens, layout, components, utilities;

@layer tokens {
:root {
  /* ==========================================================================
     1. COLORS — PRIMARY (earth, leather, wood)
     ========================================================================== */
  --color-primary: #8B4513;
  --color-primary-dark: #654321;
  --color-primary-light: #A0522D;

  /* ==========================================================================
     2. COLORS — SECONDARY (parchment, sand)
     ========================================================================== */
  --color-secondary: #CD853F;
  --color-secondary-light: #DEB887;

  /* ==========================================================================
     3. COLORS — ACCENT (gold, royal)
     ========================================================================== */
  --color-accent: #FFD700;
  --color-accent-hover: #FFC700;
  --color-accent-dim: rgba(255, 215, 0, 0.15);

  /* ==========================================================================
     4. COLORS — BACKGROUNDS (dark default — NO LIGHT MODE)
     ========================================================================== */
  --color-bg: #1a1a1a;
  --color-bg-light: #2d2d2d;
  --color-surface: #252525;
  --color-surface-hover: #2f2f2f;

  /* ==========================================================================
     5. COLORS — TEXT
     ========================================================================== */
  --color-text: #F5DEB3;
  --color-text-muted: #9a9a9a;   /* 2026-10-19: was #888 — sub-4.5:1 on surface */
  --color-text-light: #fff;
  --color-text-disabled: #555;

  /* ==========================================================================
     6. COLORS — STATUS
     ========================================================================== */
  --color-success: #4CAF50;
  --color-success-light: #66BB6A;
  --color-warning: #FF9800;
  --color-warning-light: #FFB74D;
  --color-error: #F44336;
  --color-error-light: #EF5350;
  --color-info: #2196F3;
  --color-info-light: #42A5F5;

  /* ==========================================================================
     7. COLORS — PARCHMENT
     ========================================================================== */
  --color-parchment: #3a2a1a;
  --color-parchment-light: #4a3a2a;
  --color-parchment-edge: #2a1a0a;

  /* ==========================================================================
     8. COLORS — GOLD EFFECTS
     ========================================================================== */
  --color-gold-dim: rgba(255, 215, 0, 0.15);
  --color-gold-glow: rgba(255, 215, 0, 0.4);
  --color-gold-inner-border: rgba(255, 215, 0, 0.12);
  --color-gold-accent-line: rgba(255, 215, 0, 0.3);
  /* §5.67 гранёная стёжка шапок (тиснение ромбом): шаг и пара "тень + блик"
     на вдавленный шов. Два набора — под тёмные шапки HUD и под золотую панель. */
  --facet-pitch: 48px;
  --facet-shadow-dark: rgba(0, 0, 0, 0.26);
  --facet-light-dark: rgba(255, 242, 205, 0.075);
  --facet-shadow-gold: rgba(43, 29, 18, 0.17);
  --facet-light-gold: rgba(255, 248, 220, 0.075);
  /* Нитка шва — 1px на линию (было 2px): тоньше линия + вдвое меньшие альфы =
     «тихая» стёжка. На шапке это фактура, а не рисунок (правка 2026-11-02). */
  --facet-thread: 1px;

  /* ==========================================================================
     9. COLORS — VIEWER MEDIEVAL PALETTE
     ========================================================================== */
  --color-bg-dark: #0f0e0a;
  --color-gradient-start: #1a1610;
  --color-gradient-end: #12100a;
  --color-primary-gradient-start: #8B4513;
  --color-primary-gradient-end: #CD853F;
  --color-spinner-border: rgba(255, 215, 0, 0.15);
  --color-spinner-top: #FFD700;
  --color-status-default: #A0906A;
  --color-info-bg: rgba(139, 69, 19, 0.15);
  --color-row-border: rgba(205, 133, 63, 0.2);
  --color-btn-shadow: rgba(255, 215, 0, 0.3);
  --color-fps-bg: rgba(0, 0, 0, 0.6);
  --color-hud-info-bg: rgba(0, 0, 0, 0.5);
  --color-hud-info-text: #A0906A;
  --color-console-bg: rgba(0, 0, 0, 0.85);
  --color-console-border: #8B4513;

  /* ==========================================================================
     10. COLORS — BORDERS
     ========================================================================== */
  --color-border: #3a3a3a;          /* Generic border — used in forum, simulator, admin pages */
  --color-border-light: #4a4a4a;    /* Slightly lighter border variant */

  /* ==========================================================================
     11. COLORS — LADDER: ROLE BADGES
     ========================================================================== */
  --color-role-player: #888;
  --color-role-moderator: #4CAF50;
  --color-role-admin: #FF5722;
  --color-role-cheater: #9E9E9E;

  /* ==========================================================================
     12. COLORS — LADDER: SERVER TYPE BADGES
     ========================================================================== */
  --color-type-pvp: #FFD700;
  --color-type-pve: #42A5F5;
  --color-type-rpg: #AB47BC;
  --color-type-casual: #66BB6A;

  /* ==========================================================================
     13. TYPOGRAPHY — FONT FAMILIES
     ========================================================================== */
  /* Headings: EB Garamond — real Cyrillic AND real 400/600/700, so uppercase RU
     headings never fall back to Georgia or get faux-bolded. */
  --font-heading: 'EB Garamond', 'Cormorant Garamond', georgia, serif;
  /* Wordmark: Cinzel — the name is Latin and never translated, so the sharp
     latin-only display face is safe here and is what the brand reads as. */
  --font-brand: 'Cinzel', 'EB Garamond', georgia, serif;
  /* Prose: lore, news bodies, long descriptions. */
  --font-body: 'Literata', 'Merriweather', georgia, serif;
  /* Interface: tables, lists, stats, buttons, inputs — grotesque, not serif. */
  --font-ui: 'Fira Sans', 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-micro: 'Fira Sans', 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* ==========================================================================
     14. TYPOGRAPHY — FONT SIZES
     ========================================================================== */
  --text-6: 6px;
  --text-7: 7px;
  --text-8: 8px;
  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-23: 23px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-34: 34px;
  --text-36: 36px;
  --text-38: 38px;
  --text-40: 40px;
  --text-42: 42px;
  --text-48: 48px;
  --text-56: 56px;

  /* Half-steps: legacy screens sized type in 0.5px increments. They are tokens so the
     value lives in one place; collapsing them to the whole-px scale is a separate
     visual decision (it shifts baselines), not a mechanical edit. */
  --text-9-5: 9.5px;
  --text-10-5: 10.5px;
  --text-11-5: 11.5px;
  --text-12-5: 12.5px;
  --text-13-5: 13.5px;
  --text-14-5: 14.5px;

  /* ==========================================================================
     15. TYPOGRAPHY — FONT WEIGHTS
     ========================================================================== */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ==========================================================================
     16. TYPOGRAPHY — LINE HEIGHTS
     ========================================================================== */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ==========================================================================
     17. SPACING
     ========================================================================== */
  --spacing-0: 0;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* ==========================================================================
     17b. DENSITY — высоты контролов и внутренние паддинги (плотность UI)
     Высоты: 26 / 30 / 36. Паддинги и зазоры — 8-pt ритм (2/4/6/8/12/16/24).
     Компактный режим включается на контейнере: [data-density="compact"]
     переопределяет эти же токены, компоненты читают только
     var(--ctl-h*) / var(--pad-*) / var(--gap-*) — без правок своих правил.
     ========================================================================== */
  --ctl-h-sm: 26px;
  --ctl-h: 30px;
  --ctl-h-lg: 36px;
  --pad-card-y: 10px;
  --pad-card-x: 12px;
  --pad-row-y: 6px;
  --gap-tight: 6px;
  --gap: 8px;
  --gap-loose: 12px;

  /* ==========================================================================
     18. BORDERS & RADIUS
     ========================================================================== */
  /* Канон — 4 ступени (остальные --radius-N остаются как исторические алиасы). */
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-6);
  --radius-lg: var(--radius-8);
  --radius-xl: var(--radius-12);
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 9999px;
  --border-thin: 1px solid rgba(0, 0, 0, 0.1);
  --border-thick: 2px solid var(--color-primary);
  --border-gold: 1px solid var(--color-gold-accent-line);

  /* ==========================================================================
     19. SHADOWS
     ========================================================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);
  --shadow-gold: 0 0 15px rgba(255, 215, 0, 0.2), 0 0 30px rgba(255, 215, 0, 0.1);
  --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-depth: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.05);

  /* ==========================================================================
     20. TRANSITIONS & EASING
     ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================================================
     21. ANIMATIONS — LADDER
     ========================================================================== */

  /* Server status pulse animations */
  --animation-pulse-slow: 2.5s ease-in-out infinite;
  --animation-pulse-fast: 1.5s ease-in-out infinite;
  --animation-spin: 1s linear infinite;

  /* Server list stagger */
  --server-item-animation-delay-base: 0.03s;

  /* ==========================================================================
     22. Z-INDEX
     ========================================================================== */
  /* Layer ladder — every GLOBAL layer is a token, so retuning the stack is one edit.
     Values are the ones the code shipped with; changing a number is a separate,
     visual task. Component-local micro-stacking (z-index < 100) stays a literal —
     it orders children inside one stacking context and is not a page layer. */
  --z-base: 1;
  --z-dropdown: 100;
  --z-dropdown-raised: 101;
  --z-panel: 200;
  --z-pop-layer: 300;
  --z-hud: 480;
  --z-sticky: 500;
  --z-sticky-raised: 520;
  --z-nav: 600;
  --z-panel-raised: 850;
  --z-chrome-raised: 999;
  --z-modal-overlay: 1000;
  --z-modal: 1001;
  --z-tooltip: 1100;
  --z-notification: 1200;
  --z-quest-book: 1300;
  --z-popup: 2000;
  --z-event-center: 3000;
  --z-drag: 4000;
  --z-loading: 9999;
  --z-quick-actions: 10040;
  --z-quick-actions-raised: 10050;
  --z-quick-actions-top: 10060;

  /* ==========================================================================
     23. LAYOUT
     ========================================================================== */
  --header-height: 60px;
  --footer-height: 60px;
  --container-max: 1200px;
  --container-gutter: var(--spacing-16);
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 70px;
  --news-width: 300px;
  --chat-widget-width: 360px;
  --chat-widget-height: 460px;
  --chat-widget-collapsed-height: 44px;

  /* ==========================================================================
     24. LAYOUT — LADDER PANELS
     ========================================================================== */
  --panel-header-height: 52px;
  --panel-border-width: 2px;

  /* ==========================================================================
     25. HUD BLOCKS (art-spec §G — topbar unification, 2026-10-05)
     ========================================================================== */
  --hud-block-height: 36px;
  --hud-block-bg: rgba(20, 18, 12, 0.72);
  --hud-block-bg-hover: rgba(255, 215, 0, 0.07);
  --hud-block-border: rgba(255, 215, 0, 0.16);
  --hud-block-border-hover: rgba(255, 215, 0, 0.35);
  --hud-block-radius: 6px;
  --hud-block-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 215, 0, 0.05);
  --hud-divider: rgba(245, 222, 179, 0.18);
  --hud-icon-size: 16px;
  --hud-icon-color: #EFD79A;
  --hud-res-icon-size: 24px;

  /* ==========================================================================
     26. RESOURCE COLORS (art-spec §A — 7 hues, CVD-safe lightness ladder)
     ========================================================================== */
  --res-gold: #F2CB5B;
  --res-silver: #E7ECF3;
  --res-food: #F2A85C;
  --res-wood: #DDA760;
  --res-stone: #D0C8BA;
  --res-iron: #A9C3DD;
  --res-manpower: #C6A6EC;

  /* ==========================================================================
     27. BUTTONS (art-spec §C — consumed by UI-kit task; tokens only)
     ========================================================================== */
  --btn-primary-bg: linear-gradient(180deg, #C9962E 0%, #A8771F 100%);
  --btn-primary-bg-hover: linear-gradient(180deg, #DBA73B 0%, #B8862A 100%);
  --btn-primary-bg-active: linear-gradient(180deg, #A8771F 0%, #8B5A14 100%);
  --btn-primary-border: #8B6914;
  --btn-primary-text: #1A1206;
  --btn-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 215, 0, 0.15);
  --btn-destructive-border: rgba(244, 67, 54, 0.35);
  --btn-destructive-border-hover: rgba(244, 67, 54, 0.55);
  --btn-destructive-text: #FF6659;
  --btn-destructive-bg-hover: rgba(244, 67, 54, 0.10);
  --btn-destructive-hold-fill: rgba(244, 67, 54, 0.28);
  --btn-hold-duration: 700ms;
  --btn-neutral-bg: rgba(255, 215, 0, 0.06);
  --btn-neutral-bg-hover: rgba(255, 215, 0, 0.12);
  --btn-neutral-border: rgba(255, 215, 0, 0.25);
  --btn-neutral-border-hover: rgba(255, 215, 0, 0.40);

  /* ==========================================================================
     28. MINIMAP CONTROLS (art-spec §D — consumed by minimap task; tokens only)
     ========================================================================== */
  --mmc-size: 32px;
  --mmc-inset: 6px;
  --mmc-bg: rgba(10, 9, 6, 0.55);
  --mmc-bg-hover: rgba(20, 17, 10, 0.85);
  --mmc-border: rgba(255, 215, 0, 0.20);
  --mmc-border-hover: rgba(255, 215, 0, 0.50);
  --mmc-icon: #D8C08A;
  --mmc-icon-hover: #FFD700;

  /* ==========================================================================
     29. BUILD CARDS (art-spec §E — consumed by UI-kit task; tokens only)
     ========================================================================== */
  --card-thumb-size: 56px;
  --card-thumb-bg: linear-gradient(180deg, #3A2F1E 0%, #241C10 100%);
  --card-cost-col: 64px;

  /* ==========================================================================
      30. TEXT / FOCUS (art-spec §F)
      ========================================================================== */
  --color-text-micro: #A0906A;
  --color-error-text: #FF8A80;
  --focus-ring: 2px solid #42A5F5;
  --focus-ring-offset: 2px;

  /* ==========================================================================
      31. MANUSCRIPT PIGMENTS (medieval ink palette — icons, accents, seals)
      ========================================================================== */
  --pig-gold: #d4af37;
  --pig-cinnabar: #b23a2e;
  --pig-ultramarine: #2e4a8b;
  --pig-ochre: #d9a521;
  --pig-malachite: #3f7a4e;
  --pig-white: #e8e0cf;
  --pig-ink: #2b1d12;
  --pig-parchment: #d8c39a;

  /* ==========================================================================
      33. BATTLE SCREEN (art-spec §5.75 — attacker/defender/reinforcement)
      ========================================================================== */
  --color-battle-atk: #E8A33D;
  --color-battle-def: #6FB3E8;
  --color-battle-atk-dim: rgba(232, 163, 61, 0.15);
  --color-battle-def-dim: rgba(111, 179, 232, 0.15);
  --color-battle-reinforce: var(--res-manpower, #C6A6EC);

  /* ==========================================================================
     36. BUTTON — GOLD DEEP (вариант D9 + типографика T6, выбрано 2026-11-01)
         Класс .btn--gold-deep в parts/05-01.css. Геометрия кита не меняется:
         октагон, двойная рамка и bevel остаются, меняются металл, толщина
         кромки и шрифт (UI капсом, плотный трекинг вместо разрядки 1px).
     ========================================================================== */
  --btn-deep-bg-top: #A88B42;
  --btn-deep-bg-mid: #8E7331;
  --btn-deep-bg-bot: #66501F;
  --btn-deep-text: #141005;
  --btn-deep-engrave: rgba(255, 246, 205, 0.55);
  --btn-deep-glow: rgba(168, 139, 66, 0.30);
  --btn-deep-ring-width: 8px;
  --btn-deep-chamfer: 8px;
  --btn-deep-inner-inset: 5px;
  --btn-deep-inner-width: 5px;
  /* оптический сдвиг подписи по вертикали (капс без выносных вниз).
     При 14px/500 текст садится на 1px выше центра → +1px вниз. */
  --btn-deep-text-offset: 1px;
  /* кегль и начертание подписи deep-кнопок (primary / secondary / danger) */
  --btn-deep-font-size: var(--text-14);
  --btn-deep-font-weight: 500;
  /* семейство шрифта подписи: UI-шрифт по умолчанию, можно переключить одним токеном */
  --btn-deep-font: var(--font-ui);

  /* Paired roles in the same material family as D8 (2026-11-01).
     Выбран набор K5 «пепел + сургуч»:
       secondary — пепел #2A2A26 → #1B1B18 → #121210, текст тихое золото #EFD79A
       danger    — сургуч #7E2C23 → #571C17 → #3A120F, текст кремовый #F3D9C0
     Тот же металл-подход, без текстовых теней. */
  --btn-sec-deep-bg-top: #2A2A26;
  --btn-sec-deep-bg-mid: #1B1B18;
  --btn-sec-deep-bg-bot: #121210;
  --btn-sec-deep-text: #EFD79A;
  --btn-danger-deep-bg-top: #7E2C23;
  --btn-danger-deep-bg-mid: #571C17;
  --btn-danger-deep-bg-bot: #3A120F;
  --btn-danger-deep-text: #F3D9C0;

  /* ==========================================================================
     35. ECONOMY BLOCKS — минигексы / залежи / панель точки (план 2026-11-01)
         См. §6.21 стайлгайда. Роли, не литералы: значения ссылаются на палитру.
     ========================================================================== */
  --eco-panel-bg: linear-gradient(180deg, rgba(28, 34, 21, 0.96), rgba(21, 26, 16, 0.96));
  --eco-panel-border: var(--hud-block-border, rgba(255, 215, 0, 0.16));
  --eco-panel-radius: var(--radius-8, 8px);
  --eco-divider: var(--hud-divider, rgba(245, 222, 179, 0.18));
  --eco-delta-up: var(--pig-malachite, #3f7a4e);
  --eco-delta-down: var(--color-error-text, #ff8a80);
  --eco-delta-none: var(--color-text-micro, #a0906a);
  --eco-contested: var(--pig-cinnabar, #b23a2e);
  --eco-mega: var(--pig-gold, #d4af37);
  --eco-progress-fill: var(--pig-ochre, #d9a521);
  --eco-progress-track: rgba(10, 12, 8, 0.85);
  --eco-row-gap: var(--spacing-6, 6px);

  /* §5.68 карточка/тултип/ползунок: литералы превью стали ролями.
     Меняется материал — меняется здесь, а не в ките. */
  --eco-tip-dash: rgba(242, 203, 91, 0.45);
  --eco-tip-dash-strong: rgba(242, 203, 91, 0.55);
  --eco-tipbox-bg: linear-gradient(180deg, rgba(24, 29, 17, 0.98), rgba(14, 18, 10, 0.98));
  --eco-tipbox-border: rgba(242, 203, 91, 0.45);
  --eco-tipbox-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
  --eco-meter-track-bg: rgba(8, 11, 6, 0.9);
  --eco-meter-fill: linear-gradient(180deg, #dcf09a, #8fb84a 55%, #5f7f2c);
  --eco-meter-glow: 0 0 10px rgba(168, 214, 90, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --eco-meter-warn-fill: linear-gradient(180deg, #ffd88a, #e0a53a 55%, #a4731d);
  --eco-meter-warn-glow: 0 0 10px rgba(224, 165, 58, 0.5);
  --eco-slider-track-inset: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  --eco-slider-thumb-bg: radial-gradient(circle at 35% 30%, #fff3c4, #e8c463 45%, #a8822a);
  --eco-slider-thumb-bg-flat: linear-gradient(#fff3c4, #c9a13a);
  --eco-slider-thumb-border: #9c7c2e;
  --eco-slider-thumb-glow: 0 0 10px rgba(242, 203, 91, 0.45);
  --eco-cost-bg: rgba(10, 13, 8, 0.55);

  /* ==========================================================================
      32. BUTTON CHAMFER (octagonal clip-path dimensions)
      ========================================================================== */
  --btn-chamfer: 6px;
  --btn-chamfer-inner: 3px;
  --btn-frame-outer: 6px;
  --btn-frame-inner: 4px;

  /* ==========================================================================
     34. LEGACY ART PALETTE — one token per literal value still used by the art
         surfaces (leather / parchment / gold shades). Names carry the value, not
         a role, because the value came first; rename to semantic tokens as each
         surface is redesigned. The only place a raw hex may live.
     ========================================================================== */
  --pal-34342f: #34342F;
  --pal-24241f: #24241F;
  --pal-171714: #171714;
  --pal-8e3529: #8E3529;
  --pal-652019: #652019;
  --pal-441512: #441512;
  --pal-000000: #000;
  --pal-000000aa: #000a;
  --pal-000000cc: #000c;
  --pal-0a0a0a: #0a0a0a;
  --pal-0a0a0f: #0a0a0f;
  --pal-0b0b08: #0b0b08;
  --pal-0c141b: #0c141b;
  --pal-0d1c0e: #0d1c0e;
  --pal-0e0e0e: #0e0e0e;
  --pal-101010: #101010;
  --pal-111111: #111;
  --pal-14100a: #14100a;
  --pal-141414: #141414;
  --pal-1565c0: #1565c0;
  --pal-16120c: #16120c;
  --pal-16213e: #16213e;
  --pal-170707: #170707;
  --pal-17120a: #17120a;
  --pal-1a0f06: #1a0f06;
  --pal-1a1005: #1a1005;
  --pal-1a120b: #1a120b;
  --pal-1a1405: #1a1405;
  --pal-1a150d: #1a150d;
  --pal-1a1530: #1a1530;
  --pal-1a1a2e: #1a1a2e;
  --pal-1a3018: #1a3018;
  --pal-1a3a1a: #1a3a1a;
  --pal-1b1409: #1b1409;
  --pal-1c1a15: #1c1a15;
  --pal-1c1c1c: #1c1c1c;
  --pal-1d1208: #1d1208;
  --pal-1d1810: #1d1810;
  --pal-1d1811: #1d1811;
  --pal-1e0a0a: #1e0a0a;
  --pal-1e1810: #1e1810;
  --pal-1e1d1b: #1e1d1b;
  --pal-1e1e1e: #1e1e1e;
  --pal-1e1e2e: #1e1e2e;
  --pal-1e3a28: #1e3a28;
  --pal-1e88e5: #1e88e5;
  --pal-1f3a7a: #1f3a7a;
  --pal-201603: #201603;
  --pal-202225: #202225;
  --pal-221c13: #221c13;
  --pal-222222: #222;
  --pal-22356b: #22356b;
  --pal-233a70: #233a70;
  --pal-241608: #241608;
  --pal-241a0f: #241a0f;
  --pal-241b0d: #241b0d;
  --pal-241c10: #241c10;
  --pal-241c3a: #241c3a;
  --pal-252530: #252530;
  --pal-2a1a08: #2a1a08;
  --pal-2a1b0e: #2a1b0e;
  --pal-2a1f0a: #2a1f0a;
  --pal-2a2a2a: #2a2a2a;
  --pal-2a4020: #2a4020;
  --pal-2a6030: #2a6030;
  --pal-2b1111: #2b1111;
  --pal-2b1704: #2b1704;
  --pal-2b231e: #2b231e;
  --pal-2b2418: #2b2418;
  --pal-2b2419: #2b2419;
  --pal-2c5a3a: #2c5a3a;
  --pal-2e1a1a: #2e1a1a;
  --pal-2e7d32: #2e7d32;
  --pal-2f5f4f: #2f5f4f;
  --pal-2f6b3a: #2f6b3a;
  --pal-333333: #333;
  --pal-342a19: #342a19;
  --pal-38260f: #38260f;
  --pal-3a0a0a: #3a0a0a;
  --pal-3a1616: #3a1616;
  --pal-3a2410: #3a2410;
  --pal-3a2a0a: #3a2a0a;
  --pal-3a2c18: #3a2c18;
  --pal-3a2d00: #3a2d00;
  --pal-3a2f1a: #3a2f1a;
  --pal-3a2f1e: #3a2f1e;
  --pal-3a332a: #3a332a;
  --pal-3a3f45: #3a3f45;
  --pal-3a8030: #3a8030;
  --pal-3a8a2a: #3a8a2a;
  --pal-3d8b40: #3d8b40;
  --pal-3e1616: #3e1616;
  --pal-3f2c1a: #3f2c1a;
  --pal-3f3320: #3f3320;
  --pal-3f6fb0: #3f6fb0;
  --pal-3fa07c: #3fa07c;
  --pal-423832: #423832;
  --pal-43607a: #43607a;
  --pal-43a047: #43a047;
  --pal-444444: #444;
  --pal-4a2f10: #4a2f10;
  --pal-4a2f1c: #4a2f1c;
  --pal-4a3a0a: #4a3a0a;
  --pal-4a3a1a: #4a3a1a;
  --pal-4a4f55: #4a4f55;
  --pal-54430f: #54430f;
  --pal-55aa88: #5a8;
  --pal-5673c4: #5673c4;
  --pal-5a1712: #5a1712;
  --pal-5a3d1e: #5a3d1e;
  --pal-5a4630: #5a4630;
  --pal-5a5f65: #5a5f65;
  --pal-5b3f22: #5b3f22;
  --pal-5b3f8a: #5b3f8a;
  --pal-5c4a1e: #5C4A1E;
  --pal-5e4a12: #5e4a12;
  --pal-5ea873: #5ea873;
  --pal-5f8fd0: #5f8fd0;
  --pal-666666: #666;
  --pal-66a06a: #66a06a;
  --pal-66aaff: #6af;
  --pal-66ff66: #6f6;
  --pal-6a5a1f: #6a5a1f;
  --pal-6a5f4d: #6a5f4d;
  --pal-6b2a2a: #6b2a2a;
  --pal-6b3410: #6b3410;
  --pal-6b4a18: #6b4a18;
  --pal-6b4a28: #6b4a28;
  --pal-6b4f1a: #6b4f1a;
  --pal-6b5122: #6b5122;
  --pal-6b7075: #6b7075;
  --pal-6c8aa5: #6c8aa5;
  --pal-6d7479: #6d7479;
  --pal-6e4a16: #6e4a16;
  --pal-6f2f2f: #6f2f2f;
  --pal-6f5a1c: #6f5a1c;
  --pal-6fbf73: #6fbf73;
  --pal-757575: #757575;
  --pal-767d85: #767d85;
  --pal-777777: #777;
  --pal-77ffdd: #7fd;
  --pal-7a1f16: #7a1f16;
  --pal-7a1f1f: #7a1f1f;
  --pal-7a5a9c: #7a5a9c;
  --pal-7a5f1c: #7a5f1c;
  --pal-7a6410: #7a6410;
  --pal-7a6a55: #7a6a55;
  --pal-7b1fa2: #7b1fa2;
  --pal-7bd97b: #7bd97b;
  --pal-7e241b: #7e241b;
  --pal-7ee08a: #7ee08a;
  --pal-827b73: #827b73;
  --pal-88ff88: #8f8;
  --pal-8a3a3a: #8a3a3a;
  --pal-8a3b2f: #8a3b2f;
  --pal-8a5a1c: #8a5a1c;
  --pal-8a6034: #8a6034;
  --pal-8a6d1c: #8a6d1c;
  --pal-8a6f2a: #8a6f2a;
  --pal-8a7a5a: #8a7a5a;
  --pal-8b5a14: #8B5A14;
  --pal-8b939c: #8b939c;
  --pal-8bd48b: #8bd48b;
  --pal-8c1f1f: #8c1f1f;
  --pal-8c2b21: #8c2b21;
  --pal-8e24aa: #8e24aa;
  --pal-8f3126: #8f3126;
  --pal-8fa4c4: #8fa4c4;
  --pal-8fb4e6: #8fb4e6;
  --pal-999999: #999;
  --pal-9a6a25: #9a6a25;
  --pal-9aa0a6: #9aa0a6;
  --pal-9c27b0: #9c27b0;
  --pal-9c7c1c: #9c7c1c;
  --pal-9c8b66: #9c8b66;
  --pal-9e6d17: #9e6d17;
  --pal-9ec7ff: #9ec7ff;
  --pal-9fb6c9: #9fb6c9;
  --pal-9fe3ff: #9fe3ff;
  --pal-a02020: #a02020;
  --pal-a5812e: #a5812e;
  --pal-a8771f: #A8771F;
  --pal-a8852f: #a8852f;
  --pal-a89868: #a89868;
  --pal-a89878: #a89878;
  --pal-a8c8a8: #a8c8a8;
  --pal-a9744a: #a9744a;
  --pal-a9791f: #a9791f;
  --pal-a9a9a9: #A9A9A9;
  --pal-aaaaaa: #aaa;
  --pal-b08b2f: #b08b2f;
  --pal-b08d57: #b08d57;
  --pal-b19133: #b19133;
  --pal-b23b3b: #b23b3b;
  --pal-b6ff8a: #b6ff8a;
  --pal-b8860b: #b8860b;
  --pal-b8862a: #B8862A;
  --pal-b8933a: #b8933a;
  --pal-b89a6a: #b89a6a;
  --pal-b986c9: #b986c9;
  --pal-ba68c8: #ba68c8;
  --pal-c07020: #c07020;
  --pal-c08a3e: #c08a3e;
  --pal-c08a4a: #c08a4a;
  --pal-c62828: #c62828;
  --pal-c69bff: #c69bff;
  --pal-c85a48: #c85a48;
  --pal-c8a868: #c8a868;
  --pal-c94a3c: #c94a3c;
  --pal-c9962e: #C9962E;
  --pal-c99a2e: #c99a2e;
  --pal-c9a227: #C9A227;
  --pal-c9a558: #c9a558;
  --pal-c9a84c: #c9a84c;
  --pal-c9a96e: #c9a96e;
  --pal-ccb384: #ccb384;
  --pal-cccccc: #ccc;
  --pal-cfd6dc: #cfd6dc;
  --pal-cfe0ff: #cfe0ff;
  --pal-d05548: #d05548;
  --pal-d6d6d6: #d6d6d6;
  --pal-d84315: #d84315;
  --pal-d89f36: #d89f36;
  --pal-d8a520: #d8a520;
  --pal-d8b23a: #d8b23a;
  --pal-d9c07a: #d9c07a;
  --pal-daa520: #daa520;
  --pal-dba73b: #DBA73B;
  --pal-dcc7a0: #dcc7a0;
  --pal-ddaa55: #da5;
  --pal-dddddd: #ddd;
  --pal-e04040: #e04040;
  --pal-e04b4b: #e04b4b;
  --pal-e0a96d: #E0A96D;
  --pal-e0b53a: #e0b53a;
  --pal-e6c25a: #e6c25a;
  --pal-e6c45a: #e6c45a;
  --pal-e6c465: #e6c465;
  --pal-e6c93e: #e6c93e;
  --pal-e74c3c: #e74c3c;
  --pal-e89083: #e89083;
  --pal-e8a040: #e8a040;
  --pal-e8b98a: #e8b98a;
  --pal-e8c04a: #e8c04a;
  --pal-e8c15a: #e8c15a;
  --pal-e8d9b0: #e8d9b0;
  --pal-e8dcc0: #e8dcc0;
  --pal-e9dcc0: #e9dcc0;
  --pal-ead79b: #EAD79B;
  --pal-ededed: #EDEDED;
  --pal-ee5555: #e55;
  --pal-ef8a86: #ef8a86;
  --pal-ef9a9a: #ef9a9a;
  --pal-f0c75e: #f0c75e;
  --pal-f0e2c4: #f0e2c4;
  --pal-f0e2ca: #f0e2ca;
  --pal-f0f0f0: #f0f0f0;
  --pal-f39c12: #f39c12;
  --pal-f3d9c8: #f3d9c8;
  --pal-f5c542: #f5c542;
  --pal-f6c042: #f6c042;
  --pal-f6e8c8: #f6e8c8;
  --pal-fbe38e: #fbe38e;
  --pal-fbeede: #fbeede;
  --pal-fdf3d8: #fdf3d8;
  --pal-ff7043: #ff7043;
  --pal-ff7777: #f77;
  --pal-ff7878: #ff7878;
  --pal-ff7a6b: #ff7a6b;
  --pal-ff8888: #f88;
  --pal-ff9a8a: #ff9a8a;
  --pal-ff9a9a: #ff9a9a;
  --pal-ff9d90: #ff9d90;
  --pal-ffd47a: #ffd47a;
  --pal-ffd97a: #ffd97a;
  --pal-ffe680: #ffe680;
  --pal-ffe9a8: #ffe9a8;
  --pal-fff0b8: #fff0b8;
  --pal-fff2a3: #fff2a3;
  --pal-fff2c0: #fff2c0;

}

/* Close @layer tokens */
}

/* Плотность (§17b): компактный режим включается на контейнере, компоненты
   читают те же var(--ctl-h*) / var(--pad-*) / var(--gap-*) — без правок правил. */
[data-density="compact"] {
  --ctl-h-sm: 22px;
  --ctl-h: 26px;
  --ctl-h-lg: 30px;
  --pad-card-y: 8px;
  --pad-card-x: 10px;
  --pad-row-y: 4px;
  --gap-tight: 4px;
  --gap: 6px;
  --gap-loose: 8px;
}