/* =========================================================================
   yesoff.global — DESIGN TOKENS (single source of truth)
   Светлая холодная база с фиолетовым подтоном, ЕДИНСТВЕННЫЙ бренд-акцент —
   фиолетовый, аккуратный liquid glass. Шрифты: Manrope / Inter / JetBrains Mono.

   ПРАВИЛА (проверяются scripts/check-tokens.sh, npm run lint:tokens):
   1. Цвета в компонентах — ТОЛЬКО через var(--…). Никаких hex/rgb-литералов.
   2. Полупрозрачности — через *-rgb токены: rgba(var(--color-white-rgb), 0.5).
   3. Новый цвет нужен → добавь токен сюда, не хардкоть на месте.
   4. Смена темы/бренда всего сайта = правка ТОЛЬКО этого файла.
   ========================================================================= */
:root {
  --color-arrivals-ivory: #fcf4ee; /* фон подборки детских новинок */
  /* Campaigns, wholesale and category cards: preserve the artwork palette. */
  --color-campaign-lavender: #f3effa;
  --color-campaign-mint: #eaf6f2;
  --color-campaign-badge-ink: #654395;
  --color-campaign-muted: #57516a;
  --color-campaign-cta-hover: #5120bd;
  --color-campaign-seasonal-mobile: #f8f4ff;
  --color-campaign-kids-mobile: #e9fbf2;
  --color-campaign-retail-mobile: #fef9f6;
  --color-campaign-omega-mobile: #c3d9f9;
  --color-campaign-tayo-mobile: #f6e9e4;
  --color-campaign-cindella-mobile: #cdc7e2;
  --color-campaign-lacfido-mobile: #f6e5db;
  --color-business-surface: #f7f5fa;
  --color-business-intro: #302044;
  --color-business-accent: #d8c1ff;
  --color-business-description: #ded5e9;
  --color-business-border: #64536f;
  --color-business-cta-ink: #38224f;
  --color-business-cta-hover: #e9ddfb;
  --color-business-link: #e0ccff;
  --color-business-muted: #cfc1db;
  --color-campaign-tayo-sale: #f5f6ee;
  --color-campaign-discount-bg: #ebe1fa;
  --color-campaign-discount-ink: #6330ad;
  --color-campaign-old-price: #777184;
  --color-campaign-terms: #686174;
  --color-showcase-surface: #f8f6fb;
  --color-showcase-brand-lilac: #f8f7fb;
  --color-showcase-brand-rose: #f9f2f5;
  --color-showcase-brand-sage: #f3f6ee;
  --color-showcase-brand-sand: #fbf5eb;
  --color-category-beauty-bg: #f8edf1;
  --color-category-beauty-accent: #efd6e0;
  --color-category-health-bg: #f6f2e5;
  --color-category-health-accent: #ebe2bf;
  --color-category-clothing-bg: #eeecf7;
  --color-category-clothing-accent: #dcd5ed;
  --color-category-food-bg: #fbede3;
  --color-category-food-accent: #f3d9c4;
  --color-campaign-badge-rgb: 109, 72, 166;
  --color-category-art-shadow-rgb: 53, 37, 47;
  --color-category-card-shadow-rgb: 45, 32, 62;

  /* --- Фиолетовая шкала акцента --- */
  --violet-50: #f4f1fe;
  --violet-100: #ebe4fd;
  --violet-200: #d9ccfb;
  --violet-300: #bfa8f7;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;
  --violet-100-rgb: 235, 228, 253;
  --violet-400-rgb: 167, 139, 250;
  --violet-500-rgb: 139, 92, 246;
  --violet-900-rgb: 76, 29, 149;

  /* --- Brand / accent (фиолетовый — единственный акцент) --- */
  --color-brand: #6d28d9; /* кнопки (белый текст проходит по контрасту) */
  --color-brand-hover: #5b21b6;
  --color-brand-active: #4c1d95;
  --color-brand-soft: #f4f1fe; /* мягкая подложка */
  --color-brand-link: #7c3aed; /* ссылки, мелкие акценты (ярче) */
  --color-brand-rgb: 124, 58, 237;
  --color-editorial-pink: #f1249c; /* точечный акцент редакционной витрины */

  /* --- Редакционная витрина «Здоровье»: вуали, сияния, тёплые рамки --- */
  --color-editorial-wash-lavender: #f7f4ff; /* герой: старт градиента */
  --color-editorial-wash-milk: #fefcff; /* герой: светлая середина */
  --color-editorial-wash-ice: #edf5ff; /* герой: холодный край */
  --color-editorial-wash-orchid: #fbfaff; /* фон блока хитов */
  --color-editorial-wash-lilac: #f7f5ff; /* фон блока подборок */
  --color-editorial-wash-pearl: #f8f7ff; /* градиент карточек подборок */
  --color-editorial-wash-sand: #f6f0e9; /* тёплый градиент женьшеней */
  --color-editorial-wash-stone: #e9e5dd;
  --color-editorial-glow-periwinkle-rgb: 206, 188, 255; /* сияние блока хитов */
  --color-editorial-glow-violet-rgb: 189, 164, 255; /* сияние блока подборок */
  --color-editorial-glow-mauve-rgb: 219, 207, 255; /* сияние блока подборок (низ) */
  --color-editorial-shadow-rgb: 48, 29, 102; /* мягкие тени карточек витрины */
  --color-editorial-bronze-rgb: 126, 96, 55; /* тёплые рамки женьшеней */
  --color-editorial-umber-rgb: 99, 81, 54; /* тёплые рамки напитков */
  --color-editorial-cta-violet: #5e22d9; /* градиент кнопки «заказ по ссылке» */
  --color-editorial-wash-linen: #f2eee8; /* подложка баннера инъекционных */
  --color-editorial-wash-apricot: #f7eee7; /* сцена героя витрины */
  --color-editorial-wash-clay: #eeeae4; /* блок напитков */
  --color-editorial-wash-clay-rgb: 238, 234, 228; /* растворение блока напитков */
  --color-editorial-wash-frost: #f7f7ff; /* блок сервиса: старт градиента */
  --color-editorial-wash-iris: #f4f1ff; /* блок сервиса: середина градиента */
  --color-editorial-wash-aqua: #eef8fb; /* блок сервиса: холодный край */

  /* Карточки целей «Здоровья» — пастельные градиенты (старт → финиш) */
  --color-editorial-goal-blue: #eef4ff;
  --color-editorial-goal-mint: #eef9f1;
  --color-editorial-goal-lime: #f6fbf0;
  --color-editorial-goal-rose: #fff1f5;
  --color-editorial-goal-peach: #fff8f2;
  --color-editorial-goal-sage: #f1f6e9;
  --color-editorial-goal-straw: #fbf6e8;

  /* --- Информационные страницы сервиса (оплата/доставка/контакты/как заказать) --- */
  --color-service-payment: #e16d61;
  --color-service-payment-soft: #fff0ec;
  --color-service-delivery: #28907c;
  --color-service-delivery-soft: #e9faf4;
  --color-service-contacts: #7350e7;
  --color-service-contacts-soft: #f0ecff;
  --color-service-order: #315faf;
  --color-service-order-soft: #eaf1ff;

  /* --- Амбассадорский блок (тёмная фиолетовая плашка) --- */
  --color-ambassador-night: #211747; /* градиент: старт */
  --color-ambassador-indigo: #3b1f83; /* градиент: середина */
  --color-ambassador-violet: #7231e8; /* градиент: финиш */
  --color-ambassador-perk: #cdb3ff; /* иконки преимуществ на тёмном */

  /* --- Base / neutral --- */
  --color-white: #ffffff;
  --color-on-brand: #ffffff; /* текст на бренд-заливке (кнопки, бейджи) */
  --color-white-rgb: 255, 255, 255; /* для rgba(var(--color-white-rgb), a) — стекло/вуали */
  --color-black-rgb: 0, 0, 0; /* нейтральные тени/оверлеи (лайтбокс) */

  /* --- Мессенджеры --- */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1dbb5a; /* hover */
  --color-whatsapp-rgb: 37, 211, 102;
  --color-instagram-pink: #d62976; /* градиент FAB Instagram */
  --color-instagram-amber: #f59e0b;

  /* Плавающий хаб контактов (FAB): заливки кнопок */
  --color-fab-quiz: #7b2cff;
  --color-fab-call: #1a1a39;
  --color-fab-instagram: #ff3f9b;
  --color-fab-hub: #7128ed;
  --color-fab-hub-hover: #8b37ff;
  --color-fab-hub-open: #17152f;

  /* --- Ink / text (холодная база с фиолетовым подтоном) --- */
  --color-ink: #1e1a33; /* заголовки, сильный текст */
  --color-ink-rgb: 30, 26, 51; /* тени/вуали от чернильного */
  --color-text: #2a2545; /* основной текст */
  --color-muted: #615c7c; /* вторичный текст */
  --color-muted-rgb: 97, 92, 124;
  --color-faint: #746e91; /* подписи, плейсхолдеры — AA на белом */

  /* --- Surfaces --- */
  --color-bg: #f7f7fa; /* спокойный нейтральный фон страницы */
  --color-surface: #ffffff; /* карточки, панели */
  --color-surface-2: #f4f1fe; /* лиловая подложка (под стекло) */
  --color-surface-3: #f1f2f6; /* media-slot/hover/disabled */
  --color-surface-tint: #f4f1fe;

  /* --- Borders --- */
  --color-border: #e3e4ea;
  --color-border-strong: #c7c9d3;

  /* --- Семантические (+ поверхности) --- */
  --color-success: #0f6e56;
  --color-success-soft: #e1f5ee;
  --color-warning: #854f0b;
  --color-warning-soft: #faeeda;
  --color-danger: #a32d2d;
  --color-danger-rgb: 163, 45, 45;
  --color-danger-soft: #fcebeb;
  --color-info: #185fa5;
  --color-info-soft: #e6f1fb;
  --color-star: #d97706;

  /* --- Варианты товара: физические swatch-цвета --- */
  --swatch-black: #1f2024;
  --swatch-white: var(--color-white);
  --swatch-off-white: #f5f1e8;
  --swatch-gray: #8b8d92;
  --swatch-dark-gray: #4b4d52;
  --swatch-silver: #c8cbd1;
  --swatch-red: #c83a45;
  --swatch-wine: #6f2138;
  --swatch-pink: #e9a7ba;
  --swatch-orange: #d97834;
  --swatch-yellow: #e6bf3f;
  --swatch-beige: #d9c2a2;
  --swatch-brown: #72513e;
  --swatch-khaki: #6e7251;
  --swatch-green: #3f7351;
  --swatch-light-blue: #8fc5dc;
  --swatch-blue: #3267a8;
  --swatch-navy: #263958;
  --swatch-purple: #77539b;
  --swatch-gold: #c49b45;

  /* Цена — фиолетовая, моноширинным (фирменный «биржевой» вид) */
  --price-color: var(--color-brand-hover);

  /* --- Dark band (глубокий фиолетовый — для тёмных секций/футера) --- */
  --color-dark: #2e1065;
  --color-dark-rgb: 46, 16, 101; /* тени/вуали от тёмного */
  --color-dark-2: #1e1a33;
  --color-on-dark: #ebe4fd;
  --color-on-dark-muted: #a9a3c4;

  /* --- Liquid glass (на светлом) --- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-accent-bg: rgba(124, 58, 237, 0.1);
  --glass-accent-border: rgba(124, 58, 237, 0.22);
  --glass-blur: 18px;
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Typography --- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Шкала (16px база, премиальная — заголовки крупнее) */
  --text-3xs: 0.5625rem; /* 9 — микроподписи в плотных карточках метрик */
  --text-2xs: 0.625rem; /* 10 — плотные подписи: нижняя навигация, микро-бейджи */
  --text-2xs-lg: 0.6875rem; /* 11 — eyebrow, id заказа, служебные подписи */
  --text-xs: 0.75rem; /* 12 */
  --text-sm-compact: 0.8125rem; /* 13 — compact campaign copy */
  --text-showcase-brand: 1.1875rem; /* 19 — brand card title */
  --text-showcase-heading: 1.5625rem; /* 25 — mobile showcase heading */
  --text-sm: 0.875rem; /* 14 */
  --text-base: 1rem; /* 16 — базовый текст */
  --text-md: 1.0625rem; /* 17 */
  --text-lg: 1.1875rem; /* 19 — lead */
  --text-xl: 1.25rem; /* 20 — h3 */
  --text-2xl: 1.75rem; /* 28 — h2 */
  --text-3xl: 2.5rem; /* 40 — h1 */
  --text-4xl: 3.75rem; /* 60 — display */
  --text-hero: 2.25rem;
  --text-section: 1.5rem;

  /* Числовые метрики кабинета/дашборда — фиксированные, не зависят от брейкпоинта */
  --text-metric-sm: 1.375rem; /* 22 */
  --text-metric: 1.5rem; /* 24 */
  --text-metric-lg: 1.875rem; /* 30 */
  --text-display-sm: 2.125rem; /* 34 — заголовок кабинета на мобильном */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 800; /* в этой системе максимум 800 */

  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-normal: 1.65;

  /* --- Spacing (база 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Вертикальный ритм секций (премиальный, с воздухом) */
  --section-pad: clamp(48px, 6vw, 72px);

  /* --- Radii (спокойная шкала коммерческой витрины) --- */
  --radius-xs: 8px;
  --radius-sm: 8px; /* chips, thumbnails */
  --radius-md: 12px; /* buttons, fields */
  --radius-lg: 16px; /* cards */
  --radius-xl: 20px; /* hero, modal, drawer */
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* --- Shadows (мягкие, светлая тема — глубокие тени грязнят) --- */
  --shadow-xs: 0 1px 2px rgba(30, 26, 51, 0.05);
  --shadow-sm: 0 1px 3px rgba(30, 26, 51, 0.06), 0 1px 2px rgba(30, 26, 51, 0.04);
  --shadow-card: 0 1px 3px rgba(30, 26, 51, 0.06), 0 1px 2px rgba(30, 26, 51, 0.04);
  --shadow-md: 0 4px 16px rgba(46, 16, 101, 0.08), 0 1px 4px rgba(46, 16, 101, 0.05);
  --shadow-lg: 0 12px 32px rgba(46, 16, 101, 0.12);
  --shadow-brand: 0 4px 16px rgba(124, 58, 237, 0.18);

  /* --- Focus rings --- */
  --ring-brand: 0 0 0 3px rgba(124, 58, 237, 0.15);
  --ring-neutral: 0 0 0 3px rgba(30, 26, 51, 0.08);

  /* --- Layout --- */
  --container: 1320px;
  /* Единая ширина на всех страницах (профиль/заказы тоже = --container). */
  --container-narrow: var(--container);
  --header-h: 60px;
  --header-nav-h: 44px;
  --page-pad: clamp(16px, 4vw, 32px);
  --header-search-h: 42px;
  --header-search-submit-h: 36px;
  /* Ширина меню подстраивается под самый длинный пункт: min не даёт коротким
     спискам схлопнуться, max не пускает длинные названия за край экрана. */
  --header-dropdown-w-min: 208px;
  --header-dropdown-w-max: 380px;
  /* Потолок высоты: 14 магазинов занимают ~490px, поэтому на обычном экране
     список помещается целиком и прокрутка не нужна. */
  --header-dropdown-max-h: 520px;
  --header-store-logo-size: 28px;
  --product-card-logo-size: 30px;
  --product-card-logo-size-mobile: 26px;
  --product-media-backdrop-bleed: 24px;
  --product-media-backdrop-blur: 32px;
  --product-media-backdrop-scale: 1.08;
  --product-media-backdrop-saturation: 0.72;
  --product-media-backdrop-opacity: 0.42;
  --hero-content-max: 760px;
  --hero-copy-max: 700px;
  --hero-search-h: 58px;
  --catalog-command-logo-size: 56px;
  --catalog-section-menu-w: 760px;
  --catalog-section-menu-max-h: 520px;
  --catalog-sidebar-w: 260px;
  --product-gallery-max-h: 60vh;
  --product-detail-content-max: 960px;
  --mobile-buy-bar-h: 88px;
  --how-card-min-h: 164px;
  --floating-action-size: 58px;
  --floating-action-size-mobile: 52px;
  --floating-action-edge: clamp(16px, 4vw, 28px);
  --floating-action-product-offset: calc(var(--mobile-buy-bar-h) + var(--space-4));

  /* --- Z-index scale --- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* --- Control sizing --- */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 50px;

  /* --- Breakpoints (справочник; в @media токены не работают) ---
     sm: 480px · md: 768px · lg: 1024px · xl: 1280px
     Все @media в src/** используют только эти 4 значения.            */

  /* --- Component aliases --- */
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-6);
  --card-bg: var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --card-shadow: var(--shadow-xs);
  --shadow-float: var(--shadow-lg);
  --media-bg: var(--color-surface-3);

  /* --- Glass elevation --- */
  --glass-1: rgba(255, 255, 255, 0.45); /* фоновые панели */
  --glass-2: rgba(255, 255, 255, 0.55); /* карточки */
  --glass-3: rgba(255, 255, 255, 0.72); /* шапка, модалки */
  --glass-saturate: 160%; /* backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) */

  /* Матовое стекло — для поверхностей поверх контента: выпадающие меню, поповеры.
     Отличается от глянцевого: плотнее, сильнее размыт фон, насыщенность приглушена,
     чтобы текст под меню не просвечивал цветными пятнами и читался спокойно. */
  --glass-matte: rgba(255, 255, 255, 0.93);
  --glass-matte-blur: 26px;
  --glass-matte-saturate: 118%;
  --glass-matte-border: rgba(255, 255, 255, 0.9);

  /* --- Modal / overlay --- */
  --overlay-bg: rgba(var(--color-dark-rgb), 0.4);
  --overlay-blur: 8px;
  --drawer-overlay-bg: rgba(var(--color-black-rgb), 0.32);
  --drawer-panel-bg: rgba(var(--color-white-rgb), 0.97);
  --lightbox-overlay-bg: rgba(var(--color-black-rgb), 0.78);
  --lightbox-overlay-blur: 18px;
  --lightbox-control-bg: rgba(var(--color-black-rgb), 0.46);
  --lightbox-control-bg-hover: rgba(var(--color-black-rgb), 0.72);
  --lightbox-control-border: rgba(var(--color-white-rgb), 0.2);
  --how-card-bg: rgba(var(--color-white-rgb), 0.07);
  --how-card-bg-hover: rgba(var(--color-white-rgb), 0.11);
  --how-card-border: rgba(var(--color-white-rgb), 0.16);
  --modal-radius: var(--radius-xl);
  --modal-shadow: var(--shadow-lg);
  --modal-w-sm: 420px;
  --modal-w-md: 560px;
  --modal-w-lg: 760px;

  /* --- Skeleton --- */
  --skeleton-base: var(--color-surface-3);
  --skeleton-sheen: rgba(var(--color-white-rgb), 0.6);

  /* --- Admin shell / charts (панель admin.yesoff.kz) ---
     Тёмный аубержин-рейл + светлое рабочее поле. Полупрозрачности на рейле —
     только через rgba(var(--color-white-rgb), a) / rgba(var(--admin-rail-bg-rgb), a). */
  --admin-rail-bg: #201a3a; /* аубержин-чернильный */
  --admin-rail-bg-rgb: 32, 26, 58;
  --admin-rail-text: #ece8fb; /* основной текст на рейле */
  --admin-rail-text-muted: #a39ec4; /* кикеры, неактивные пункты */
  --admin-rail-accent: #c4b5fd; /* светлая сирень: активный пункт, полоска */
  --admin-rail-w: 248px;
  --admin-rail-w-collapsed: 72px;
  --admin-topbar-h: 60px;
  --admin-content-max: 1600px;

  /* Категориальная палитра графиков — фиксированный порядок, не циклить.
     Проверена валидатором (protan/deutan/tritan ΔE ≥ 8, контраст ≥ 3:1
     на --color-surface и --color-bg). */
  --chart-1: #7c3aed; /* фиолетовый — бренд, первая серия */
  --chart-2: #0f9d8a; /* бирюзовый */
  --chart-3: #c96f06; /* янтарный */
  --chart-4: #2563eb; /* синий */
  --chart-5: #db2777; /* розовый */
  --chart-6: #5a6fb8; /* серо-синий */
  --chart-1-rgb: 124, 58, 237; /* заливка area под линией выручки */
  --chart-grid: #e9e9f1; /* линии сетки — тише границ карточек */
  --chart-axis: #7d7897; /* подписи осей */
  --chart-tooltip-bg: #231d3d; /* тёмный тултип, текст — --color-on-dark */
}

@media (min-width: 768px) {
  :root {
    --text-hero: 2.5rem;
    --text-section: 1.75rem;
  }
}

/* Без поддержки backdrop-filter стекло становится матовым, а не дырявым */
@supports not (backdrop-filter: blur(1px)) {
  :root {
    --glass-bg: #fdfcff;
    --glass-bg-strong: #ffffff;
    --glass-1: #f8f6fd;
    --glass-2: #fdfcff;
    --glass-3: #ffffff;
    --glass-matte: #ffffff;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--color-surface);
    --glass-bg-strong: var(--color-surface);
    --glass-1: var(--color-surface);
    --glass-2: var(--color-surface);
    --glass-3: var(--color-surface);
    --glass-matte: var(--color-surface);
  }
}

/* Admin only: neutral light workspace, matched to Twenty UI's Inter/gray scale.
   The storefront retains its existing brand palette. */
:root[data-admin] {
  --admin-text-avatar: 0.625rem;
  --admin-text-insight: 1.125rem;
  --admin-sidebar-surface: #f9f9f9;
  --admin-object-coral-bg: #ffe1de;
  --admin-object-coral: #d44c47;
  --admin-object-blue-bg: #dfe7ff;
  --admin-object-blue: #4e6ed8;
  --admin-object-green-bg: #e0f1df;
  --admin-object-green: #488459;
  --admin-object-teal-bg: #d5f0e9;
  --admin-object-teal: #008f7a;
  --admin-object-violet-bg: #eee5fb;
  --admin-object-violet: #9264c2;
  --admin-object-orange-bg: #ffe6c9;
  --admin-object-orange: #c67926;
  --admin-avatar-blue-bg: #e5ebfc;
  --admin-avatar-blue: #5369a1;
  --admin-avatar-green-bg: #e0f1eb;
  --admin-avatar-green: #478069;
  --admin-avatar-violet-bg: #f1e5f8;
  --admin-avatar-violet: #895fa3;
  --admin-status-purple-bg: #f4eafa;
  --admin-action-blue: #5268d3;
  --admin-action-blue-hover: #455abb;
  color-scheme: light;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Inter', sans-serif;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #fcfcfc;
  --color-surface-3: #f1f1f1;
  --color-ink: #333333;
  --color-text: #333333;
  --price-color: #333333;
  --glass-border: #ebebeb;
  --shadow-card: none;
  --glass-blur: 0px;
  --modal-radius: 8px;
  --overlay-blur: 0px;
  --color-muted: #666666;
  --color-faint: #838383;
  --admin-icon-muted: #999999;
  --admin-focus: #5265ad;
  --admin-selection: #eef2ff;
  --admin-tag-green-bg: #e9f6ee;
  --admin-tag-green-text: #307d50;
  --admin-tag-yellow-bg: #fff6d8;
  --admin-tag-yellow-text: #916a12;
  --admin-tag-orange-bg: #fff0e5;
  --admin-tag-orange-text: #a35a1c;
  --admin-tag-red-bg: #fceced;
  --admin-tag-red-text: #b23b3b;
  --color-border: #ebebeb;
  --color-border-strong: #d6d6d6;
  --color-brand: #333333;
  --color-brand-hover: #484848;
  --color-brand-active: #202020;
  --color-brand-link: #333333;
  --color-brand-soft: #f1f1f1;
  --color-brand-rgb: 51, 51, 51;
  --color-dark-rgb: 20, 20, 20;
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-matte: #ffffff;
  --glass-1: #ffffff;
  --glass-2: #ffffff;
  --glass-3: #ffffff;
  --glass-accent-bg: #f1f1f1;
  --glass-accent-border: #ebebeb;
  --glass-matte-border: #ebebeb;
  --drawer-panel-bg: #ffffff;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --control-h: 28px;
  --control-h-sm: 24px;
  --control-h-lg: 32px;
  --admin-control-radius: 4px;
  --admin-control-padding: 8px;
  --admin-control-font: var(--text-sm);
  --admin-text-avatar: 0.625rem;
  --admin-text-caption: 0.75rem;
  --admin-control-icon: 16px;
  --admin-field-gap: 4px;
  --admin-filter-gap: 8px;
  --admin-filter-width: 180px;
  --admin-date-width: 148px;
  --text-2xs: 0.6875rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.8125rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-metric-lg: 1.75rem;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --admin-rail-bg: #fcfcfc;
  --admin-rail-bg-rgb: 252, 252, 252;
  --admin-rail-text: #333333;
  --admin-rail-text-muted: #666666;
  --admin-rail-accent: #333333;
  --admin-rail-w: 220px;
  --admin-rail-w-collapsed: 60px;
  --admin-topbar-h: 48px;
  --admin-content-max: 1800px;
  --chart-1: #647acb;
  --chart-1-rgb: 100, 122, 203;
  --chart-grid: #ebebeb;
  --chart-axis: #777777;
  --chart-tooltip-bg: #333333;
}
/* Storefront v2. Scoped so the administrative workspace keeps its own system.
   Typography: one family; prices use tabular figures rather than a second font.
   Space: 4px grid. Touch controls: 44px compact / 48px primary. */
body[data-storefront] {
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: var(--font-sans);
  --fw-extrabold: 700;
  --fw-black: 700;
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.5;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-section: 24px;
  --text-hero: 32px;
  --color-bg: #f7f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #f4f4f7;
  --color-surface-3: #eeeef3;
  --color-ink: #20202b;
  --color-text: #30303e;
  --color-muted: #646473;
  --color-text-muted: #646473;
  --color-faint: #707080;
  --color-border: #e3e3eb;
  --color-brand: #6d28d9;
  --color-brand-hover: #5420ac;
  --color-brand-link: #6422c9;
  --color-brand-soft: #f1eafa;
  --color-success: #16724f;
  --control-h: 48px;
  --control-h-sm: 44px;
  --control-h-lg: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --modal-radius: 20px;
  --page-pad: 16px;
  --header-h: 64px;
  --section-pad: 32px;
  --sf-text-page: 24px;
  --sf-text-product: 22px;
  --sf-text-section: 20px;
  --sf-text-price: 28px;
  --sf-nav-label: 11px;
  --sf-bottom-nav-h: 64px;
}