/* ============================================================
   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: #d56231;
    --meb-button-primary-foreground: #ffffff;
    --meb-button-primary-shadow: 0 4px 0 #000000;
    --meb-button-primary-border: #000000;
    --meb-button-primary-hover-background: #e0743f;
    --meb-button-primary-hover-shadow: 0 2px 0 #000000;
    --meb-button-primary-active-background: #b8522a;
    --meb-button-primary-active-shadow: 0 1px 0 #000000;
    --meb-button-primary-focus-shadow: 0 0 0 3px rgba(213,98,49,0.5);
    --meb-button-primary-disabled-background: #cccccc;
    --meb-button-primary-disabled-foreground: #888888;
    --meb-button-primary-disabled-border: #aaaaaa;

    /* ── Button · Secondary ────────────────────────────────── */
    --meb-button-secondary-background: #f5a26f;
    --meb-button-secondary-foreground: #1a1a2e;
    --meb-button-secondary-shadow: 0 4px 0 #000000;
    --meb-button-secondary-border: #000000;
    --meb-button-secondary-hover-background: #f7b58a;
    --meb-button-secondary-hover-shadow: 0 2px 0 #000000;
    --meb-button-secondary-active-background: #d4884f;
    --meb-button-secondary-active-shadow: 0 1px 0 #000000;
    --meb-button-secondary-focus-shadow: 0 0 0 3px rgba(245,162,111,0.5);
    --meb-button-secondary-disabled-background: #cccccc;
    --meb-button-secondary-disabled-foreground: #888888;
    --meb-button-secondary-disabled-border: #aaaaaa;

    /* ── Button · Danger ────────────────────────────────────── */
    --meb-button-danger-background: #dc3545;
    --meb-button-danger-foreground: #ffffff;
    --meb-button-danger-shadow: 0 4px 0 #000000;
    --meb-button-danger-border: #000000;
    --meb-button-danger-hover-background: #e04a59;
    --meb-button-danger-hover-shadow: 0 2px 0 #000000;
    --meb-button-danger-active-background: #c42d3c;
    --meb-button-danger-active-shadow: 0 1px 0 #000000;
    --meb-button-danger-focus-shadow: 0 0 0 3px rgba(220,53,69,0.5);
    --meb-button-danger-disabled-background: #cccccc;
    --meb-button-danger-disabled-foreground: #888888;
    --meb-button-danger-disabled-border: #aaaaaa;

    /* ── Button · Accent ────────────────────────────────────── */
    --meb-button-accent-background: #ffd02e;
    --meb-button-accent-foreground: #000000;
    --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 3px rgba(255,208,46,0.5);
    --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: #444444;
    --meb-button-ghost-shadow: none;
    --meb-button-ghost-border: transparent;
    --meb-button-ghost-hover-background: rgba(0,0,0,0.06);
    --meb-button-ghost-hover-foreground: #222222;
    --meb-button-ghost-active-background: rgba(0,0,0,0.10);
    --meb-button-ghost-focus-shadow: 0 0 0 3px rgba(68,68,68,0.3);
    --meb-button-ghost-disabled-foreground: #888888;

    /* ── Button · Link ──────────────────────────────────────── */
    --meb-button-link-foreground: #4c6ed7;
    --meb-button-link-hover-foreground: #3a57b0;
    --meb-button-link-active-foreground: #2d4590;
    --meb-button-link-focus-shadow: 0 0 0 3px rgba(76,110,215,0.3);
    --meb-button-link-disabled-foreground: #888888;

    /* ── Shared design tokens used by mapped components ──────── */
    --meb-accent-primary: #d56231;
    --meb-accent-success: #4caf50;
    --meb-accent-warning: #ff9800;
    --meb-accent-info: #2196f3;
    --meb-accent-secondary: #ffd02e;
    --meb-accent-danger: #dc3545;
    --meb-surface-page: #FFE7C0;
    --surface-page: #FFE7C0;
    --meb-text-default: #2b2418;
    --meb-text-inverse: #ffffff;
    --meb-text-muted: #888888;
    --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-section-feature: #fff8f1;
    --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-modal: #ffffff;
    --meb-surface-dropdown: #ffffff;
    --meb-surface-tooltip: #222222;
    --meb-surface-tabs: transparent;
    --meb-surface-secondary: #f5a26f;
    --meb-surface-disabled: #cccccc;
    --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-width-sm: 1px;
    --meb-border-muted: #aaaaaa;
    --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-focus-accordion: #d56231;
    --meb-focus-sidenav: #d56231;
    --meb-focus-pagination: #7542e8;
    --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-xs: 4px;
    --meb-space-stack-sm: 8px;
    --meb-space-stack-md: 16px;
    --meb-space-stack-lg: 24px;
    --meb-space-stack-xl: 32px;
    --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-xs: 4px;
    --meb-space-grid-sm: 8px;
    --meb-space-grid-md: 16px;
    --meb-space-grid-lg: 24px;
    --meb-space-grid-xl: 32px;
    --meb-space-container-sm: 8px;
    --meb-space-container-md: 16px;
    --meb-space-container-lg: 24px;
    --meb-layout-container-sm: 640px;
    --meb-layout-container-md: 768px;
    --meb-layout-container-lg: 1024px;
    --meb-layout-container-xl: 1280px;
    --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;
    --meb-size-pagination-item: 48px;

    /* ── Typography ──────────────────────────────────────────── */
    --meb-font-family-primary: Outfit, sans-serif;
    --meb-font-family-accent: Lilita One, cursive;
    --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-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-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, cursive;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --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-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;

    /* ── 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;
}

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);
}