/* ============================================================
   theme-default.css — Pre-render default token values
   Loaded synchronously before Blazor initializes so the first
   paint already has valid design-system colors.
   ThemeService overrides these dynamically via the scoped
   #app-root[data-theme] rule block at runtime.

   Values here MUST stay in sync with ThemeTokenDefaults.cs.

   Governance:
   - Theme files own semantic color, border, shadow, focus, and
     component-state variables.
   - Theme files must not become ad hoc typography files.
   - Shared components must consume semantic tokens only; no raw hex,
     no raw font values, and no visual-state bypasses in shared UI.
   - New theme keys must be semantic names, not visual names.
   ============================================================ */

:root {
    /* ── Button · Primary ──────────────────────────────────── */
    --meb-button-primary-background: #c2552a;
    --meb-button-primary-foreground: #ffffff;
    --meb-button-primary-shadow: 0 4px 0 #000000;
    --meb-button-primary-border: #000000;
    --meb-button-primary-hover-background: #b9502a;
    --meb-button-primary-hover-shadow: 0 2px 0 #000000;
    --meb-button-primary-active-background: #a8461f;
    --meb-button-primary-active-shadow: 0 1px 0 #000000;
    --meb-button-primary-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-primary-disabled-background: #c9a293;
    --meb-button-primary-disabled-foreground: #ffffff;
    --meb-button-primary-disabled-border: #c9a293;
    /* ── Button · Secondary ────────────────────────────────── */
    --meb-button-secondary-background: #ffffff;
    --meb-button-secondary-foreground: #2b2418;
    --meb-button-secondary-shadow: 0 4px 0 #000000;
    --meb-button-secondary-border: #000000;
    --meb-button-secondary-hover-background: #ececec;
    --meb-button-secondary-hover-shadow: 0 2px 0 #000000;
    --meb-button-secondary-active-background: #d9d9d9;
    --meb-button-secondary-active-shadow: 0 1px 0 #000000;
    --meb-button-secondary-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-secondary-disabled-background: #f4f4f4;
    --meb-button-secondary-disabled-foreground: #999999;
    --meb-button-secondary-disabled-border: #d9d9d9;
    /* ── Button · Danger ────────────────────────────────────── */
    --meb-button-danger-background: #ff3d3d;
    --meb-button-danger-foreground: #ffffff;
    --meb-button-danger-shadow: 0 4px 0 #000000;
    --meb-button-danger-border: #000000;
    --meb-button-danger-hover-background: #ff5757;
    --meb-button-danger-hover-shadow: 0 2px 0 #000000;
    --meb-button-danger-active-background: #d92b2b;
    --meb-button-danger-active-shadow: 0 1px 0 #000000;
    --meb-button-danger-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-danger-disabled-background: #f4b4b4;
    --meb-button-danger-disabled-foreground: #ffffff;
    --meb-button-danger-disabled-border: #f4b4b4;
    /* ── Button · Accent ────────────────────────────────────── */
    --meb-button-accent-background: #ffd02e;
    --meb-button-accent-foreground: #2b2418;
    --meb-button-accent-shadow: 0 4px 0 #000000;
    --meb-button-accent-border: #000000;
    --meb-button-accent-hover-background: #ffda56;
    --meb-button-accent-hover-shadow: 0 2px 0 #000000;
    --meb-button-accent-active-background: #e6b800;
    --meb-button-accent-active-shadow: 0 1px 0 #000000;
    --meb-button-accent-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-accent-disabled-background: #cccccc;
    --meb-button-accent-disabled-foreground: #888888;
    --meb-button-accent-disabled-border: #aaaaaa;
    /* ── Button · Ghost ─────────────────────────────────────── */
    --meb-button-ghost-background: transparent;
    --meb-button-ghost-foreground: #2b2418;
    --meb-button-ghost-shadow: none;
    --meb-button-ghost-border: #000000;
    --meb-button-ghost-hover-background: #f5f5f5;
    --meb-button-ghost-hover-foreground: #222222;
    --meb-button-ghost-active-background: #e6e6e6;
    --meb-button-ghost-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-ghost-disabled-foreground: #999999;
    /* ── Button · Link ──────────────────────────────────────── */
    --meb-button-link-foreground: #3a57b0;
    --meb-button-link-hover-foreground: #2d4590;
    --meb-button-link-active-foreground: #1f3270;
    --meb-button-link-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-link-disabled-foreground: #888888;
    /* ── Shared design tokens used by mapped components ──────── */
    --meb-accent-primary: #d56231;
    --meb-accent-success: #1be777;
    --meb-accent-warning: #f5b62e;
    --meb-accent-info: #2e74f5;
    --meb-accent-secondary: #ffd02e;
    --meb-accent-danger: #ff3d3d;
    --meb-surface-page: #FFE7C0;
    --surface-page: #FFE7C0;
    --meb-text-default: #2b2418;
    --meb-text-inverse: #ffffff;
    /* Brand navy heading. MUST match ThemeTokenDefaults["text.heading.brand"]
       and the AddTextHeadingBrandToken migration. */
    --meb-text-heading-brand: #0a0d60;
    --meb-text-valueprops-downloads: #FFD2D2;
    --meb-text-valueprops-printing: #ABD9F0;
    --meb-text-valueprops-paper: #FFFFFF;
    --meb-text-valueprops-mess: #CFB283;
    --meb-text-muted: #555555;
    --meb-text-input: #2b2418;
    --meb-text-select: #2b2418;
    --meb-text-avatar: #333333;
    --meb-text-modal: #2b2418;
    --meb-text-dropdown: #2b2418;
    --meb-text-tooltip: #ffffff;
    --meb-text-tabs: #6b6b6b;
    --meb-border-color-subtle: #d9d9d9;
    --meb-surface-card: #ffffff;
    --meb-surface-hero-background: #8E50E5;
    --meb-surface-section-feature: #fff8f1;
    --meb-surface-section-valueprops: #000000;
    --meb-surface-input: #ffffff;
    --meb-surface-input-filled: #f5f5f5;
    --meb-surface-select: #ffffff;
    --meb-surface-select-filled: #f5f5f5;
    --meb-surface-avatar: #ffffff;
    --meb-surface-avatar-subtle: #f5f5f5;
    --meb-surface-row-stripe: #f3fdff;
    --meb-surface-modal: #ffffff;
    --meb-surface-dropdown: #ffffff;
    --meb-surface-tooltip: #222222;
    --meb-surface-tabs: transparent;
    --meb-surface-section-howtoplay: #FFF569;
    --meb-surface-section-blog-listing: #FFF569;
    --meb-surface-filter-chip-active: #7542BD;
    --meb-text-filter-chip-active: #FFFFFF;
    --meb-surface-section-creator: #00DC5F;
    --meb-surface-section-player: #FF7051;
    --meb-surface-section-popularcases: #6CBCFF;
    --meb-surface-section-freecta: #272660;
    --meb-surface-section-faq: #FFCF24;
    --meb-surface-tag-popularcase: #FFDE66;
    --meb-surface-section-startplaying-media: #6EC3BF;
    --meb-surface-secondary: #f5a26f;
    --meb-surface-disabled: #f0f0f0;
    --meb-border-default: #000000;
    --meb-border-subtle: #d6d6d6;
    --meb-border-accent: #d56231;
    --meb-border-inverse: #ffffff;
    --meb-border-accordion: #cccccc;
    --meb-border-accordion-active: #000000;
    --meb-border-accordion-disabled: #cccccc;
    --meb-border-sidenav: #dddddd;
    --meb-border-sidenav-active: #cccccc;
    --meb-border-pagination: #d4d4de;
    --meb-border-pagination-item: #1c1e52;
    --meb-border-pagination-item-active: #7542e8;
    --meb-border-pagination-item-disabled: #d4d4de;
    --meb-border-input: #000000;
    --meb-border-select: #000000;
    --meb-border-avatar: #cccccc;
    --meb-border-modal: #e0e0e0;
    --meb-border-dropdown: #e0e0e0;
    --meb-border-tooltip: transparent;
    --meb-border-tabs: #d9d9d9;
    --meb-border-muted: #d9d9d9;
    --meb-border-width-sm: 1px;
    /* border.width.md: 2px emphasis border for value/media cards */
    --meb-border-width-md: 2px;
    --meb-border-width-lg: 3px;
    /* border.width.medium: 2.5px border for MebButton component borders */
    --meb-border-width-medium: 2.5px;
    /* ── Radius semantic tokens (mirrors ThemeTokenDefaults — pre-render static values) ── */
    --meb-radius-sm: 4px;
    /* radius.input: 5px — form input/textarea border-radius (ContactUs .form-control) */
    --meb-radius-input: 5px;
    --meb-radius-md: 8px;
    /* ── Border Radius Scale ──────────────────────────────── */
    --meb-border-radius-none: 0px;
    --meb-border-radius-sm: 8px;
    --meb-border-radius-md: 16px;
    --meb-border-radius-lg: 24px;
    --meb-border-radius-xl: 32px;
    --meb-border-radius-xxl: 40px;
    --meb-border-radius-full: 9999px;
    --meb-shadow-accordion: none;
    --meb-shadow-none: none;
    --meb-shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --meb-shadow-md: 0 4px 10px rgba(0,0,0,0.15);
    --meb-shadow-lg: 0 10px 24px rgba(0,0,0,0.22);
    --meb-shadow-avatar: none;
    --meb-shadow-modal: 0 10px 30px rgba(0,0,0,0.2);
    --meb-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.18);
    --meb-shadow-tooltip: 0 4px 12px rgba(0,0,0,0.2);
    --meb-shadow-pagination: none;
    --meb-shadow-pagination-active: 0 8px 20px rgba(117,66,232,0.24);
    --meb-shadow-surface-comic: 4px 4px 0 0 #000000;
    --meb-shadow-surface-comic-sm: 2px 2px 0 0 #000000;
    --meb-focus-accordion: #d56231;
    --meb-focus-sidenav: #d56231;
    --meb-focus-pagination: #7542e8;
    /* focus ring dimensional tokens */
    --meb-focus-ring-width: 3px;
    --meb-focus-ring-offset: 2px;
    --meb-focus-ring-offset-lg: 4px;
    --meb-icon-accordion: currentColor;
    --meb-icon-accordion-active: currentColor;
    --meb-icon-sidenav: currentColor;
    --meb-icon-sidenav-active: currentColor;
    --meb-icon-pagination: currentColor;
    --meb-icon-pagination-disabled: #8a8a9a;
    --meb-space-pagination-gap: 24px;
    --meb-space-stack-none: 0px;
    --meb-space-stack-xxs: 2px;
    --meb-space-stack-xs: 4px;
    --meb-space-stack-sm: 8px;
    --meb-space-stack-md: 16px;
    --meb-space-stack-lg: 24px;
    --meb-space-stack-xl: 32px;
    /* ── Space stack scale extensions (AddRadiusAndSpaceExtTokens + AddNavAdminAndFormTokens) ── */
    --meb-space-stack-10: 10px; /* form-control inner padding */
    --meb-space-stack-15: 15px; /* alert/card inner padding */
    --meb-space-inline-xxs: 2px;
    --meb-space-inline-xs: 4px;
    --meb-space-inline-sm: 8px;
    --meb-space-inline-md: 16px;
    --meb-space-inline-lg: 24px;
    --meb-space-inline-xl: 32px;
    --meb-space-grid-none: 0px;
    --meb-space-grid-xxs: 2px;
    --meb-space-grid-xs: 4px;
    --meb-space-grid-sm: 8px;
    --meb-space-grid-md: 16px;
    --meb-space-grid-lg: 24px;
    --meb-space-grid-xl: 32px;
    --meb-space-grid-10: 10px;
    --meb-space-container-xs: 4px;
    --meb-space-container-sm: 8px;
    --meb-space-container-md: 16px;
    --meb-space-container-lg: 24px;
    --meb-space-container-xl: 32px;
    --meb-space-container-homepage-split-block: 80px;
    --meb-space-container-homepage-split-inline: 108px;
    --meb-layout-container-sm: 640px;
    --meb-layout-container-md: 768px;
    --meb-layout-container-lg: 1024px;
    --meb-layout-container-xl: 1280px;
    --meb-layout-homepage-split-panel-cta-width: 248px;
    --meb-layout-homepage-split-panel-height: 400px;
    --meb-layout-grid-cols-1: 1;
    --meb-layout-grid-cols-2: 2;
    --meb-layout-grid-cols-3: 3;
    --meb-layout-grid-cols-4: 4;
    --meb-layout-grid-cols-5: 5;
    --meb-layout-grid-cols-6: 6;
    --meb-radius-pagination: 40px;
    /* ── Opacity ────────────────────────────────────────── */
    --meb-opacity-soft: 0.92;
    --meb-opacity-muted: 0.6;
    /* ── Size ──────────────────────────────────────────── */
    --meb-size-touch-target: 44px;
    --meb-size-pagination-item: 48px; /* size.content.max-width: maximum prose line length */
    --meb-size-content-max-width: 60ch;
    /* size.art-stage.min-height: minimum height for art stages that layer decorative assets */
    --meb-size-art-stage-min-height: 200px; /* ── Typography ──────────────────────────────────────────── */
    --meb-font-family-primary: Outfit, sans-serif;
    --meb-font-family-accent: Lilita One, Segoe UI Black, Arial Black, system-ui, sans-serif;
    --meb-font-family-heading-display: Poppins, sans-serif; /* game-list redesign (B2): display heading family */
    --meb-font-weight-light: 300;
    --meb-font-weight-regular: 400;
    --meb-font-weight-medium: 500;
    --meb-font-weight-semibold: 600;
    --meb-font-weight-bold: 700;
    --meb-font-weight-extrabold: 800; /* game-list redesign (Story C): Poppins display title */
    --meb-font-size-display-desktop: 48px;
    --meb-font-size-display-mobile: 36px;
    --meb-font-size-h1-desktop: 40px;
    --meb-font-size-h1-mobile: 28px;
    --meb-font-size-h2-desktop: 32px;
    --meb-font-size-h2-mobile: 24px;
    --meb-font-size-h3-desktop: 24px;
    --meb-font-size-h3-mobile: 20px;
    --meb-font-size-body-desktop: 16px;
    --meb-font-size-body-mobile: 16px;
    --meb-font-size-body-sm-desktop: 14px;
    --meb-font-size-body-sm-mobile: 14px;
    --meb-font-lineheight-display: 1.1;
    --meb-font-lineheight-heading: 1.2;
    --meb-font-lineheight-body: 1.5;
    --meb-font-lineheight-tight: 1;
    /* font.letter-spacing.tight: 0.02em — used for confidence labels, uppercase headings */
    --meb-font-letter-spacing-tight: 0.02em;
    /* font.letter-spacing.loose: 0.08em — used for uppercase footer column headings */
    --meb-font-letter-spacing-loose: 0.08em;
    /* font.letter-spacing.tighter: -0.02em — used for large display headings requiring tighter tracking */
    --meb-font-letter-spacing-tighter: -0.02em;
    --meb-text-role-display-font: font.family.accent;
    --meb-text-role-display-weight: font.weight.regular;
    --meb-text-role-display-lineheight: font.lineheight.display;
    --meb-text-role-heading-font: font.family.primary;
    --meb-text-role-heading-weight: font.weight.bold;
    --meb-text-role-heading-lineheight: font.lineheight.heading;
    --meb-text-role-body-font: font.family.primary;
    --meb-text-role-body-weight: font.weight.regular;
    --meb-text-role-body-lineheight: font.lineheight.body;
    --font-family-primary: Outfit, sans-serif;
    --font-family-accent: Lilita One, Segoe UI Black, Arial Black, system-ui, sans-serif;
    --font-family-heading-display: Poppins, sans-serif; /* game-list redesign (B2): un-prefixed alias */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800; /* game-list redesign (Story C): un-prefixed alias */
    --font-size-display-desktop: 48px;
    --font-size-display-mobile: 36px;
    --font-size-h1-desktop: 40px;
    --font-size-h1-mobile: 28px;
    --font-size-h2-desktop: 32px;
    --font-size-h2-mobile: 24px;
    --font-size-h3-desktop: 24px;
    --font-size-h3-mobile: 20px;
    --font-size-body-desktop: 16px;
    --font-size-body-mobile: 16px;
    --font-size-body-sm-desktop: 14px;
    --font-size-body-sm-mobile: 14px;
    --font-lineheight-display: 1.1;
    --font-lineheight-heading: 1.2;
    --font-lineheight-body: 1.5;
    --text-role-display-font: font.family.accent;
    --text-role-display-weight: font.weight.regular;
    --text-role-display-lineheight: font.lineheight.display;
    --text-role-heading-font: font.family.primary;
    --text-role-heading-weight: font.weight.bold;
    --text-role-heading-lineheight: font.lineheight.heading;
    --text-role-body-font: font.family.primary;
    --text-role-body-weight: font.weight.regular;
    --text-role-body-lineheight: font.lineheight.body;
    --meb-palette-neutral-black: #101828;
    --meb-palette-neutral-white: #ffffff;
    /* ── Palette · Error ────────────────────────────────────── */
    --meb-palette-error-primary: #dc3545;
    --meb-palette-error-subtle: #f8d7da;
    /* ── Tabs · Segmented aliases ────────────────────────────── */
    --meb-tabs-segmented-tab-background: #f4f4f4;
    --meb-tabs-segmented-tab-foreground: #0a0d60;
    --meb-tabs-segmented-tab-border: #000000;
    --meb-tabs-segmented-tab-shadow: #000000;
    --meb-tabs-segmented-tab-active-background: #f4f4f4;
    --meb-tabs-segmented-tab-active-foreground: #0a0d60;
    --meb-tabs-segmented-tab-active-border: #000000;
    --meb-tabs-segmented-tab-active-shadow: #000000;
    --meb-tabs-segmented-tab-hover-background: #ebebeb;
    --meb-tabs-segmented-tab-hover-foreground: #0a0d60;
    --meb-tabs-segmented-tab-hover-border: #000000;
    --meb-tabs-segmented-tab-pressed-background: #e3e3e3;
    --meb-tabs-segmented-tab-pressed-foreground: #0a0d60;
    --meb-tabs-focus-ring: #d56231;
    --meb-tabs-segmented-tab-disabled-background: #e0e0e0;
    --meb-tabs-segmented-tab-disabled-foreground: #888888;
    --meb-tabs-segmented-tab-disabled-border: #cccccc;
    --meb-tabs-segmented-body-background: #f4f4f4;
    --meb-tabs-segmented-body-border: #000000;
    --meb-tabs-segmented-body-shadow: #000000;
    --tabs-segmented-tab-background: #f4f4f4;
    --tabs-segmented-tab-foreground: #0a0d60;
    --tabs-segmented-tab-border: #000000;
    --tabs-segmented-tab-shadow: #000000;
    --tabs-segmented-tab-active-background: #f4f4f4;
    --tabs-segmented-tab-active-foreground: #0a0d60;
    --tabs-segmented-tab-active-border: #000000;
    --tabs-segmented-tab-active-shadow: #000000;
    --tabs-segmented-tab-hover-background: #ebebeb;
    --tabs-segmented-tab-hover-foreground: #0a0d60;
    --tabs-segmented-tab-hover-border: #000000;
    --tabs-segmented-tab-pressed-background: #e3e3e3;
    --tabs-segmented-tab-pressed-foreground: #0a0d60;
    --tabs-focus-ring: #d56231;
    --tabs-segmented-tab-disabled-background: #e0e0e0;
    --tabs-segmented-tab-disabled-foreground: #888888;
    --tabs-segmented-tab-disabled-border: #cccccc;
    --tabs-segmented-body-background: #f4f4f4;
    --tabs-segmented-body-border: #000000;
    --tabs-segmented-body-shadow: #000000;
    /* ── Tabs · BottomPill aliases ───────────────────────────── */
    /* Values MUST match ThemeTokenDefaults.RequiredTokens["tabs.bottompill.*"]
       and the AddTabsBottomPillTokens migration. Pre-DB-load fallback so the
       mobile gameplay tab shell renders correctly before themes resolve. */
    --meb-tabs-bottompill-container-background: #ffffff;
    --meb-tabs-bottompill-container-border: #000000;
    --meb-tabs-bottompill-container-shadow: #000000;
    --meb-tabs-bottompill-tab-background: transparent;
    --meb-tabs-bottompill-tab-foreground: #2b2418;
    --meb-tabs-bottompill-tab-active-background: #00ac4a;
    --meb-tabs-bottompill-tab-active-foreground: #ffffff;
    --meb-tabs-bottompill-tab-hover-background: #f5f5f5;
    --meb-tabs-bottompill-tab-hover-foreground: #2b2418;
    --meb-tabs-bottompill-tab-disabled-background: #f0f0f0;
    --meb-tabs-bottompill-tab-disabled-foreground: #999999;
    --tabs-bottompill-container-background: #ffffff;
    --tabs-bottompill-container-border: #000000;
    --tabs-bottompill-container-shadow: #000000;
    --tabs-bottompill-tab-background: transparent;
    --tabs-bottompill-tab-foreground: #2b2418;
    --tabs-bottompill-tab-active-background: #00ac4a;
    --tabs-bottompill-tab-active-foreground: #ffffff;
    --tabs-bottompill-tab-hover-background: #f5f5f5;
    --tabs-bottompill-tab-hover-foreground: #2b2418;
    --tabs-bottompill-tab-disabled-background: #f0f0f0;
    --tabs-bottompill-tab-disabled-foreground: #999999;
    /* ── Navigation semantic tokens (5712/5713) ─────────────────────────────── */
    /* Values MUST match ThemeTokenDefaults.RequiredTokens["nav.*"] defaults.    */
    --meb-nav-accent: #FF3D3D;
    --nav-accent: #FF3D3D;
    --meb-nav-accent-dark: #cc2a2a;
    --nav-accent-dark: #cc2a2a;
    --meb-nav-text: #2D2D2D;
    --nav-text: #2D2D2D;
    --meb-nav-surface: #FFFFFF;
    --nav-surface: #FFFFFF;
    --meb-nav-surface-hover: #f5f5f5;
    --nav-surface-hover: #f5f5f5;
    --meb-nav-avatar-anon-bg: #D9D9D9;
    --nav-avatar-anon-bg: #D9D9D9;
    --meb-nav-border-subtle: #999999;
    --nav-border-subtle: #999999;
    /* ── Mobile nav panel tokens (AddMobileNavPanelTokens) ───────────────────── */
    --meb-nav-mobile-panel-background: #FFB800;
    --nav-mobile-panel-bg: #FFB800;
    --meb-nav-mobile-panel-text: #1a1a2e;
    --nav-mobile-panel-text: #1a1a2e;
    --meb-nav-mobile-login-background: #29B6D6;
    --nav-mobile-login-bg: #29B6D6;
    --meb-nav-mobile-logout-background: #E85D5D;
    --nav-mobile-logout-bg: #E85D5D;
    /* ── Admin sidebar nav tokens (nav.admin.*) — used by NavMenu.razor.css (MyEventBingo.Admin) ── */
    --meb-nav-admin-toprow-background: rgba(0,0,0,0.4);
    --meb-nav-admin-overlay-low: rgba(255,255,255,0.1);
    --meb-nav-admin-link-color: #d7d7d7;
    --meb-nav-admin-link-active-background: rgba(255,255,255,0.37);
    /* ── Admin Nav typography tokens (nav.admin.brand/item.font-size) ───────────── */
    --meb-nav-admin-brand-font-size: 1.1rem;
    --meb-nav-admin-item-font-size: 0.9rem;
    /* ── Space stack extended scale (AddRadiusAndSpaceExtTokens migration) ──────── */
    --meb-space-stack-2xs: 2px;
    --meb-space-stack-6: 6px; /* hamburger button padding */
    --meb-space-stack-12: 12px;
    --meb-space-stack-14: 14px;
    --meb-space-stack-20: 20px;
    --meb-space-stack-40: 40px;
    --meb-space-stack-48: 48px;
    --meb-space-inline-10: 10px;
    --meb-space-inline-12: 12px;
    --meb-space-inline-14: 14px;
    --meb-space-inline-20: 20px;
    /* ── Radius extended scale (AddRadiusAndSpaceExtTokens migration) ────────────── */
    --meb-radius-xs: 2px; /* hamburger line border-radius */
    --meb-radius-lg: 12px; /* 12px rounded corners */
    --meb-radius-panel: 1.5em; /* panel border-radius (scales with font-size) */
    --meb-radius-pill: 9999px; /* full pill shape */
    --meb-radius-full: 50%; /* circular elements (avatars, badges) */
    /* ── Display typography tokens ───────────────────────────────────────────── */
    --meb-font-size-display-desktop: 48px;
    --font-size-display-desktop: 48px;
    --meb-font-size-display-mobile: 36px;
    --font-size-display-mobile: 36px;
    --meb-text-role-display-font: font.family.accent;
    --text-role-display-font: font.family.accent;
    --meb-text-role-display-weight: font.weight.regular;
    --text-role-display-weight: font.weight.regular;
    --meb-text-role-display-lineheight: font.lineheight.display;
    --text-role-display-lineheight: font.lineheight.display;
    /* ── Resolved typography role aliases ────────────────────────────────────── */
    /* These are the concrete resolved values (not token references).            */
    --font-family-display: Lilita One, Segoe UI Black, Arial Black, system-ui, sans-serif;
    --font-weight-display: 400;
    --font-family-heading: Outfit, sans-serif;
    --font-weight-heading: 700;
    --font-family-body: Outfit, sans-serif;
    --font-weight-body: 400;
    --font-lineheight-body: 1.5;
    --font-lineheight-tight: 1;
    /* ── Medium weight role token ────────────────────────────────────────────── */
    --meb-text-role-medium-weight: font.weight.medium;
    --text-role-medium-weight: font.weight.medium;
    --font-weight-medium: 500;
    /* ── Legal page surface tokens (5860) ────────────────────────────────────── */
    --meb-surface-hero-background: #8E50E5;
    --legal-hero-bg: #8E50E5;
    --meb-surface-cta-background: #1C1E52;
    --legal-cta-bg: #1C1E52;
    /* ── Decoration tokens (5860) ────────────────────────────────────────────── */
    --meb-decoration-primary: #8E50E5;
    --meb-decoration-secondary: #1C1E52;
    --meb-decoration-hero-subtle: #7542BD;
    --legal-deco-secondary: #1C1E52;
        /* ── QR Surface Tokens ──────────────────────────────────── */
    --meb-surface-qr-background: #ffffff;
    --meb-surface-qr-frame-border: #ff6b9d;
    --meb-surface-qr-title-foreground: #001a6b;
    --meb-surface-button-qrprimary: #00ffcc;
    --meb-shadow-button-qrprimary: 0 4px 0 #000000;
    --meb-text-button-qrprimary: #000000;
    --meb-border-button-qrprimary: #000000;
    --meb-surface-button-qrsecondary: #ffc107;
    --meb-shadow-button-qrsecondary: 0 4px 0 #000000;
    --meb-text-button-qrsecondary: #000000;
    --meb-border-button-qrsecondary: #000000;
    --meb-shadow-qr-modal: 4px 4px 4px 0px #000000;
    --meb-layout-qr-modal-width: 359px;
    --meb-layout-qr-button-width: 280px;
    --meb-layout-popup-pop-width: 440px;
    --meb-layout-qr-scanner-select-max-width: 240px;
    --meb-layout-qr-scanner-select-height: 30px;
    /* ── Admin surface tokens (surface.admin.*) ─────────────────────────────── */
    --meb-surface-admin-sidebar: linear-gradient(180deg, #052767 0%, #3a0647 70%);
    --meb-surface-admin-toprow: #f7f7f7;
    --meb-surface-admin-card: #f8f9fa;
    --meb-surface-admin-reconnect-button: #6b9ed2;
    --meb-surface-admin-reconnect-button-hover: #3b6ea2;
    --meb-surface-admin-reconnect-overlay: rgba(0, 0, 0, 0.4);
    /* surface.overlay.backdrop: semi-transparent modal dialog scrim (PopupMessageBox).
       Must stay in sync with ThemeTokenDefaults.cs — see surface.overlay.backdrop. */
    --meb-surface-overlay-backdrop: rgba(10,10,10,0.8);
    /* ── Admin border tokens (border.admin.*) ────────────────────────────────── */
    --meb-border-admin-toprow: #d6d5d5;
    --meb-border-admin-card: #dee2e6;
    --meb-border-admin-reconnect-spinner: #0087ff;
    /* ── Admin shadow tokens (shadow.admin.*) ────────────────────────────────── */
    --meb-shadow-admin-card: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --meb-shadow-admin-reconnect: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    /* ── Motion tokens ─────────────────────────────────────────── */
    --meb-motion-fast: 120ms ease;
    /* WonByMe winner-celebration motion. Durations only; the bounce overshoot
       easing comes from the shared ui-anim system (animation.css). Mirrors the
       ThemeTokenDefaults / ThemeColors values (motion.winpop / motion.winpulse
       / shadow.win) for first-paint before the theme service runs. */
    --meb-motion-winpop: 480ms;
    --meb-motion-winpulse: 1800ms;
    --meb-shadow-win: 0 6px 20px rgba(0, 0, 0, 0.45);
    /* -- Three-Layer 23.6 backfill (2026-05-19 audit) -------------- */
    /* Tokens that lived in DB+L2 but were not emitted by theme-default.css. */
    /* Values match the dev DB snapshot (DB-canonical policy). */
    --meb-border-avatar-hover: rgba(0,0,0,0.1);
    --meb-border-avatar-selected: #d56231;
    --meb-border-badge: #000000;
    --meb-border-badge-error: #ff3d3d;
    --meb-border-badge-focus: #d56231;
    --meb-border-checkbox: #000000;
    --meb-border-checkbox-error: #ff3d3d;
    --meb-border-checkbox-focus: #d56231;
    --meb-border-danger: #dc3545;
    --meb-border-input-default: #767676;
    --meb-border-input-error: #ff3d3d;
    --meb-border-input-focus: #d56231;
    --meb-border-link: #000000;
    --meb-border-link-error: #ff3d3d;
    --meb-border-link-focus: #d56231;
    --meb-border-modal-error: #ff3d3d;
    --meb-border-modal-focus: #d56231;
    --meb-border-navigation: #000000;
    --meb-border-navigation-error: #ff3d3d;
    --meb-border-navigation-focus: #d56231;
    --meb-border-radio: #000000;
    --meb-border-radio-error: #ff3d3d;
    --meb-border-radio-focus: #d56231;
    --meb-border-select-error: #ff3d3d;
    --meb-border-select-focus: #d56231;
    --meb-border-slider: #000000;
    --meb-border-slider-error: #ff3d3d;
    --meb-border-slider-focus: #d56231;
    --meb-border-success: #00ac4a;
    --meb-border-switch: #000000;
    --meb-border-switch-error: #ff3d3d;
    --meb-border-switch-focus: #d56231;
    --meb-border-tabs-segmented: #000000;
    --meb-border-textarea: #000000;
    --meb-border-textarea-error: #ff3d3d;
    --meb-border-textarea-focus: #d56231;
    --meb-border-toggle: #000000;
    --meb-border-toggle-error: #ff3d3d;
    --meb-border-toggle-focus: #d56231;
    --meb-button-info-active-background: #52aef0;
    --meb-button-info-active-shadow: 0 1px 0 #000000;
    --meb-button-info-background: #6cbcff;
    --meb-button-info-border: #000000;
    --meb-button-info-disabled-background: #cccccc;
    --meb-button-info-disabled-border: #aaaaaa;
    --meb-button-info-disabled-foreground: #888888;
    --meb-button-info-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-button-info-foreground: #000000;
    --meb-button-info-hover-background: #85c9ff;
    --meb-button-info-hover-shadow: 0 2px 0 #000000;
    --meb-button-info-shadow: 0 4px 0 #000000;
    --meb-focus-dropdown: #d56231;
    --meb-focus-ring-color: #2e74f5;
    --meb-focus-ring-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c2552a;
    --meb-font-letter-spacing-subtle: 1px;
    --meb-font-size-17: 17px;
    --meb-font-size-22: 22px;
    --meb-footer-background: #000000;
    --meb-footer-focus-outline: #f5b62e;
    --meb-footer-link: #f5b62e;
    --meb-footer-link-hover: #ffffff;
    --meb-footer-text: #ffffff;
    --footer-bg: var(--meb-footer-background);
    --footer-focus: var(--meb-footer-focus-outline);
    --footer-link: var(--meb-footer-link);
    --footer-link-hover: var(--meb-footer-link-hover);
    --footer-text: var(--meb-footer-text);
    --meb-FooterBackground: #000000;
    --meb-FooterFocusOutline: #f5b62e;
    --meb-FooterLink: #f5b62e;
    --meb-FooterLinkHover: #ffffff;
    --meb-FooterText: #ffffff;
    --meb-indicator-tabs: #d56231;
    --meb-layout-homepage-split-panel-content-width: 350px;
    --meb-opacity-footer-text: 0.7;
    --meb-palette-blue-light: #1594ff;
    --meb-palette-blue-primary: #2e74f5;
    --meb-palette-green-alt: #3da954;
    --meb-palette-green-dark: #00ac4a;
    --meb-palette-green-primary: #1be777;
    --meb-palette-neutral-dark: #3c3c3c;
    --meb-palette-neutral-light: #f5f5f5;
    --meb-palette-neutral-mid: #d9d9d9;
    --meb-palette-orange-alt: #ff6b00;
    --meb-palette-orange-light: #f57a2e;
    --meb-palette-orange-primary: #d56231;
    --meb-palette-purple-light: #8a38f5;
    --meb-palette-purple-primary: #562fb1;
    --meb-palette-red-dark: #aa0000;
    --meb-palette-red-primary: #ff3d3d;
    --meb-palette-yellow-alt: #f5b62e;
    --meb-palette-yellow-primary: #ffd02e;
    /* Board grid-line palette (Figma node 293:10201) -- kept in sync with the
       ThemeColors seed and ThemeTokenDefaults.RequiredTokens. */
    --meb-palette-blue-navy: #272660;
    --meb-palette-blue-sky: #6cbcff;
    --meb-palette-green-bright: #00dc5f;
    --meb-palette-green-mint: #3bff93; /* first-paint fallback for the existing green.mint token (game-creation CTA + game-list Scan QR) */
    --meb-palette-green-moss: #71a543;
    --meb-palette-orange-bright: #ff6201;
    --meb-palette-orange-bingo: #ffc31c;
    --meb-palette-yellow-bingo: #fff569; /* game-list redesign (Story C): brand Bingo Yellow (panel surface) */
    --meb-palette-pink-primary: #fe1888;
    --meb-palette-yellow-bright: #ffcf24;
    --meb-shadow-avatar-selected: rgba(213,98,49,0.3);
    --meb-shadow-badge: none;
    --meb-shadow-checkbox: none;
    --meb-shadow-color: #00000040;
    --meb-shadow-discard-btn: 5px 5px 0 #6a0a0a;
    --meb-shadow-link: none;
    --meb-shadow-navigation: none;
    --meb-shadow-radio: none;
    --meb-shadow-save-btn: 5px 5px 0 #445f3c;
    --meb-shadow-slider: none;
    --meb-shadow-switch: none;
    --meb-shadow-textarea: none;
    --meb-shadow-toggle: none;
    --meb-space-inline-2xs: 2px;
    --meb-space-inline-none: 0px;
    --meb-surface-accordion: #ffffff;
    --meb-surface-accordion-active: #f7f7f7;
    --meb-surface-accordion-disabled: #f0f0f0;
    --meb-surface-accordion-header: #ffffff;
    --meb-surface-accordion-hover: #f5f5f5;
    --meb-surface-accordion-panel: #ffffff;
    --meb-surface-badge: #ffffff;
    --meb-surface-badge-disabled: #f0f0f0;
    --meb-surface-badge-filled: #f5f5f5;
    --meb-surface-checkbox: #ffffff;
    --meb-surface-checkbox-disabled: #f0f0f0;
    --meb-surface-checkbox-filled: #f5f5f5;
    --meb-surface-danger: #fef2f2;
    --meb-surface-dropdown-active: #eaeaea;
    --meb-surface-dropdown-hover: #f5f5f5;
    --meb-surface-input-disabled: #f0f0f0;
    --meb-surface-link: #ffffff;
    --meb-surface-link-disabled: #f0f0f0;
    --meb-surface-link-filled: #f5f5f5;
    --meb-surface-modal-disabled: #f0f0f0;
    --meb-surface-modal-overlay: rgba(0,0,0,0.5);
    --meb-surface-navigation: #ffffff;
    --meb-surface-navigation-disabled: #f0f0f0;
    --meb-surface-navigation-filled: #f5f5f5;
    --meb-surface-notification-success: #ebffe3;
    --meb-surface-notification-warning: #e8d87d;
    --meb-surface-overlay: rgba(0,0,0,0.5);
    --meb-surface-pagination: transparent;
    --meb-surface-pagination-item: #ffffff;
    --meb-surface-pagination-item-active: #7542e8;
    --meb-surface-pagination-item-disabled: #f2f2f2;
    --meb-surface-pagination-item-hover: #f3f3f8;
    --meb-surface-radio: #ffffff;
    --meb-surface-radio-disabled: #f0f0f0;
    --meb-surface-radio-filled: #f5f5f5;
    --meb-surface-select-disabled: #f0f0f0;
    --meb-surface-sidenav: #ffffff;
    --meb-surface-sidenav-active: #f5f5f5;
    --meb-surface-sidenav-disabled: #f0f0f0;
    --meb-surface-sidenav-hover: #f5f5f5;
    --meb-surface-sidenav-item: transparent;
    --meb-surface-slider: #ffffff;
    --meb-surface-slider-disabled: #f0f0f0;
    --meb-surface-slider-filled: #f5f5f5;
    --meb-surface-success: #f0fdf4;
    --meb-surface-switch: #ffffff;
    --meb-surface-switch-disabled: #f0f0f0;
    --meb-surface-switch-filled: #f5f5f5;
    --meb-surface-tabs-active: #ffffff;
    --meb-surface-tabs-segmented: #f2f2f2;
    --meb-surface-tabs-segmented-active: #f2f2f2;
    --meb-surface-textarea: #ffffff;
    --meb-surface-textarea-disabled: #f0f0f0;
    --meb-surface-textarea-filled: #f5f5f5;
    --meb-surface-toggle: #ffffff;
    --meb-surface-toggle-disabled: #f0f0f0;
    --meb-surface-toggle-filled: #f5f5f5;
    --meb-text-accordion: #2b2418;
    --meb-text-accordion-disabled: #999999;
    --meb-text-accordion-header: #2b2418;
    --meb-text-accordion-panel: #2b2418;
    --meb-text-badge: #2b2418;
    --meb-text-badge-disabled: #999999;
    --meb-text-checkbox: #2b2418;
    --meb-text-checkbox-disabled: #999999;
    --meb-text-danger: #842029;
    --meb-text-input-disabled: #999999;
    --meb-text-input-placeholder: #6b6b6b;
    --meb-text-link: #3a57b0;
    --meb-text-link-disabled: #999999;
    --meb-text-modal-disabled: #999999;
    --meb-text-navigation: #2b2418;
    --meb-text-navigation-disabled: #999999;
    --meb-text-notification-warning: #775019;
    --meb-text-pagination: #1c1e52;
    --meb-text-pagination-item: #1c1e52;
    --meb-text-pagination-item-active: #ffffff;
    --meb-text-pagination-item-disabled: #8a8a9a;
    --meb-text-radio: #2b2418;
    --meb-text-radio-disabled: #999999;
    --meb-text-select-disabled: #999999;
    --meb-text-sidenav: #2b2418;
    --meb-text-sidenav-active: #000000;
    --meb-text-sidenav-disabled: #999999;
    --meb-text-slider: #2b2418;
    --meb-text-slider-disabled: #999999;
    --meb-text-success: #00ac4a;
    --meb-text-switch: #2b2418;
    --meb-text-switch-disabled: #999999;
    --meb-text-tabs-active: #2b2418;
    --meb-text-tabs-segmented: #6b6b6b;
    --meb-text-tabs-segmented-active: #2b2418;
    --meb-text-textarea: #2b2418;
    --meb-text-textarea-disabled: #999999;
    --meb-text-toggle: #2b2418;
    --meb-text-toggle-disabled: #999999;

    /* ── Blog surface tokens (AddBlogSurfaceTokens migration) ───── */
    /* Values MUST stay in sync with ThemeTokenDefaults.cs blog.* entries. */
    --meb-blog-lead-card-overlay-background: rgba(0, 0, 0, 0.12);
    --meb-blog-hero-title-text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    --meb-blog-lead-date-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.1);
    --meb-blog-card-hover-shadow: 6px 6px 0 0 #101828;
    --meb-blog-section-inline-padding: 90px;
    --meb-blog-hero-band-height: 420px;
    --meb-blog-pagination-nav-shadow: 2px 2px 0 0 #101828;
    --meb-blog-hero-art-min-width: 520px; /* Minimum width for .bl-hero-art (desktop) */
    --meb-blog-mobile-lead-thumb-height: 320px; /* Fixed height for .bl-mobile-lead-thumb (mobile) */

    /* ── Blog Detail Semantic Tokens (CT-05/T6638 + #7856 Frozen Detail v1.2 §5) */
    /* Surface tokens — contract values per Frozen Blog Detail UI/UX v1.2 §5 */
    --meb-blog-surface-page: #FFE7C0;        /* peach page background (was #ffc31c) */
    --meb-blog-surface-hero: #A7DBFF;        /* lighter sky hero strip (palette refresh 20260711) */
    --meb-blog-surface-article: #FFC31C;     /* yellow article shell (was #ffffff) */
    --meb-blog-surface-toc: #ffffff;         /* TOC panel — contract baseline */
    --meb-blog-surface-tag: #FFDE66;         /* lemon tag pill (was #ffffff) */
    /* New per-#7856: backstrip / datepill / cta / related-band / related-card chrome */
    --meb-blog-surface-backstrip: #FFC31C;
    --meb-blog-surface-hero-media-empty: transparent;
    --meb-blog-surface-toc-active: transparent;
    --meb-blog-surface-datepill: #FFFFFF;
    --meb-blog-surface-cta: #272660;
    --meb-blog-surface-related-band: #FFCF24;
    --meb-blog-surface-related-card-datepill: #F0F0F0;
    --meb-blog-surface-related-card-arrow: #FFFFFF;
    /* Section variant surfaces — palette refresh 20260711 softens the v6 contract values */
    --meb-blog-surface-section-default: #FFFFFF;
    --meb-blog-surface-section-highlight: #FFF9B3;
    --meb-blog-surface-section-sky: #A7DBFF;
    --meb-blog-surface-section-mint: #A8FFD0;
    --meb-blog-surface-section-coral: #FFB09F;
    --meb-blog-surface-section-ink: #5B5A93;
    --meb-blog-surface-date-badge: #22c55e;
    --meb-blog-surface-figure-container: transparent;  /* no figure fill — section variant shows through */
    /* blog.surface.footer: dark navy CTA band behind BuiltInGameFooter */
    --meb-blog-surface-footer: #273660;

    /* Text tokens */
    --meb-blog-text-title: #1a1a2e;
    --meb-blog-text-subtitle: #374151;
    --meb-blog-text-back: #374151;
    --meb-blog-text-on-page: #2D2D2D;
    --meb-blog-text-body: #000000;           /* pure black per contract (was #1D1D1D) */
    --meb-blog-text-meta: #000000;           /* pure black per contract (was #999999) */
    --meb-blog-text-caption: #999999;
    --meb-blog-text-section-title: #1D1D1D;
    --meb-blog-text-toc-heading: #272660;  /* navy per contract (was #999999) */
    --meb-blog-text-toc-link: #1D1D1D;
    --meb-blog-text-tag: #000000;            /* pure black per contract (was #1D1D1D) */
    --meb-blog-text-heading: #1D1D1D;
    --meb-blog-text-date-badge: #ffffff;
    /* New per-#7856: link variants / inverse / backstrip / TOC active / CTA */
    --meb-blog-text-link-light: #0A0D60;
    --meb-blog-text-link-dark: #FFFFFF;
    --meb-blog-text-inverse: #FFFFFF;
    --meb-blog-text-backstrip: #0A0D60;
    --meb-blog-text-toc-active: #0A0D60;
    --meb-blog-text-cta: #FFFFFF;
    --meb-blog-text-cta-subtitle: #FFFFFF;
    /* Section variant text colours — Frozen Blog Detail UI/UX v1.2 §5 */
    --meb-blog-text-on-section-default: #000000;
    --meb-blog-text-on-section-highlight: #0A0D60;
    --meb-blog-text-on-section-sky: #0A0D60;
    --meb-blog-text-on-section-mint: #0A0D60;
    --meb-blog-text-on-section-coral: #0A0D60;
    --meb-blog-text-on-section-ink: #FFF569;  /* lemon on lighter ink for contrast (palette refresh 20260712) */
    /* Section variant link colours — Frozen Blog Detail UI/UX v1.2 §5 line 339-345 */
    --meb-blog-text-section-link-default: #0A0D60;
    --meb-blog-text-section-link-highlight: #0A0D60;
    --meb-blog-text-section-link-sky: #0A0D60;
    --meb-blog-text-section-link-mint: #0A0D60;
    --meb-blog-text-section-link-coral: #0A0D60;
    --meb-blog-text-section-link-ink: #FFF569;  /* lemon links on lighter ink (palette refresh 20260712) */
    /* Border tokens */
    --meb-blog-border-toc: #000000;          /* black per contract (was #666666) */
    --meb-blog-border-toc-divider: #000000;  /* TOC item dividers — black per contract */
    --meb-blog-border-tag: #666666;
    /* Indicator tokens — per-#7856 */
    --meb-blog-indicator-toc-active: #0A0D60;
    --meb-blog-border-card: #e5e7eb;
    --meb-blog-border-figure-container: transparent;  /* no figure stroke (palette refresh 20260711) */
    /* Section variant chrome — Frozen Blog Detail UI/UX v1.2 §5 */
    --meb-blog-border-section: #000000;
    --meb-blog-radius-section: 32px;
    /* Listing card variants — Frozen Blog Listing v0.9 §5 (CT-04 T3-02).
       ADO #8005: coral/sky/pink text tokens switched from white (#FFFFFF) to
       navy (#0A0D60) to clear WCAG AA. White-on-saturated-mid-tone variants
       had been failing AA at ~2.7-3.3:1; navy text passes (coral ~6.17:1, sky
       ~8.29:1, pink ~5.97:1). Matches the mint/gold/plum approach. 3-authority
       recolour: this CSS + ThemeTokenDefaults.cs + the 20260715000002 migration
       must stay in sync (parity asserted by WcagPaletteContrastTests). */
    --meb-blog-card-sky-background: #6CBCFF;
    --meb-blog-card-sky-text: #0A0D60;
    --meb-blog-card-coral-background: #FF7051;
    --meb-blog-card-coral-text: #0A0D60;
    --meb-blog-card-mint-background: #00F4AF;
    --meb-blog-card-mint-text: #0A0D60;
    /* ADO #7987: gold card bg recoloured from #FFF569 to #E6B800. The previous value
       collided with the listing page surface (--meb-surface-section-blog-listing, also
       #FFF569), so gold cards were invisible against the page slab — only border + shadow
       distinguished them. New value passes AA (~9:1) against the navy text token and
       clears ≥1.2:1 distinguishability from the page (~1.61:1). 3-authority recolour:
       this CSS + ThemeTokenDefaults.cs + the 20260715000000 ThemeColors migration must
       stay in sync (parity asserted by WcagPaletteContrastTests). */
    --meb-blog-card-gold-background: #E6B800;
    --meb-blog-card-gold-text: #0A0D60;
    --meb-blog-card-plum-background: #8E50E5;
    --meb-blog-card-plum-text: #FFFFFF;
    --meb-blog-card-pink-background: #FF5BAA;
    --meb-blog-card-pink-text: #0A0D60;
    /* Shadow tokens */
    --meb-blog-shadow-card: 0 2px 8px rgba(0,0,0,0.1);
    --meb-blog-shadow-section: 4px 4px 0 0 #000000;
    /* Font size tokens */
    --meb-blog-font-size-title: clamp(28px, 3.2vw, 44px);
    --meb-blog-font-size-title-mobile: clamp(24px, 6vw, 32px);
    --meb-blog-font-size-subtitle: 18px;
    --meb-blog-font-size-section: clamp(22px, 2.4vw, 32px);
    --meb-blog-font-size-section-mobile: clamp(18px, 4.5vw, 24px);
    --meb-blog-font-size-h3: clamp(17px, 1.8vw, 24px);
    --meb-blog-font-size-h3-mobile: clamp(15px, 3.5vw, 20px);
    --meb-blog-font-size-heading: clamp(20px, 2vw, 28px);
    --meb-blog-font-size-body: 18px;
    --meb-blog-font-size-small: 13px;
    --meb-blog-font-size-caption: 12px;
    --meb-blog-font-size-toc-link: 15px;
    /* ── Frozen Blog Detail v1.2 §5 typography family (#7855-A) ─────────── */
    --meb-blog-font-family-heading: Poppins, sans-serif;
    --meb-blog-font-family-body: Outfit, sans-serif;
    --meb-blog-text-role-hero-weight: 800;
    --meb-blog-text-role-section-weight: 700;
    --meb-blog-text-role-subsection-weight: 700;
    --meb-blog-text-role-body-weight: 400;
    --meb-blog-text-role-meta-weight: 400;
    --meb-blog-text-role-toc-weight: 500;
    /* Unitless ratios — scale across separate desktop/mobile font sizes */
    --meb-blog-text-role-hero-lineheight: 1.33;
    --meb-blog-text-role-section-lineheight: 1.25;
    --meb-blog-text-role-subsection-lineheight: 1.33;
    --meb-blog-text-role-body-lineheight: 1.55;
    --meb-blog-text-role-meta-lineheight: 1.43;
    --meb-blog-text-role-toc-lineheight: 1.67;
    --meb-blog-font-size-role-hero: 48px;
    --meb-blog-font-size-role-hero-mobile: 36px;
    --meb-blog-font-size-role-section: 32px;
    --meb-blog-font-size-role-section-mobile: 28px;
    --meb-blog-font-size-role-subsection: 24px;
    --meb-blog-font-size-role-subsection-mobile: 20px;
    --meb-blog-font-size-role-body: 18px;
    --meb-blog-font-size-role-body-mobile: 16px;
    --meb-blog-font-size-role-meta: 14px;
    --meb-blog-font-size-role-meta-mobile: 14px;
    --meb-blog-font-size-role-toc: 18px;
    --meb-blog-font-size-role-toc-mobile: 16px;
    /* Line-height tokens */
    --meb-blog-lineheight-title-mobile: 1.15;
    --meb-blog-lineheight-subtitle: 1.6;
    --meb-blog-lineheight-body: 1.8;
    --meb-blog-lineheight-body-mobile: 1.7;
    --meb-blog-lineheight-card-title: 1.4;
    /* Letter-spacing tokens */
    --meb-blog-letter-spacing-toc: 0.05em;
    /* Spacing tokens */
    --meb-blog-space-section: 28px;
    --meb-blog-space-section-mobile: 20px;
    --meb-blog-space-figure: 0.75em;
    /* ── Admin blog panel size tokens ───────────────────────────── */
    --meb-size-admin-blog-preview-min-height: 520px;
    --meb-size-admin-blog-preview-max-height: 600px;
    --meb-size-admin-blog-section-preview-min-height: 450px;
    --meb-size-admin-blog-section-preview-max-height: 500px;
    /* ── Blog layout sizing ─────────────────────────────────────── */
    --meb-size-blog-toc-sidebar: 240px;
    /* ── Radius extension ───────────────────────────────────────── */
    --meb-radius-10: 10px;
}

html,
body {
    background-color: var(--surface-page);
    color: var(--meb-text-default);
}

#app-root,
#app {
    background-color: var(--surface-page);
    color: var(--meb-text-default);
}