/* ==========================================================================
   Legacy Expovent → EP token bridge

   main.css still ships hundreds of --clr-* variables and rules from the
   Expovent template (light-theme greys on dark surfaces). Rather than
   patching every page, this file remaps those semantics onto --ep-* tokens.

   Load order (required): tokens.css → main.css → legacy-bridge.css → ep-components.css
   ========================================================================== */

:root,
[bd-theme="bd-theme-dark"],
[bd-theme="bd-theme-light"] {
   /* Core type */
   --clr-common-heading: var(--ep-text-heading);
   --clr-common-body-text: var(--ep-text-primary);
   --clr-common-placeholder: var(--ep-text-muted);

   /* Expovent "secondary" is the high-contrast title colour (white on dark /
      near-black on light). Alias to heading so titles stay readable. */
   --clr-text-secondary: var(--ep-text-heading);

   /* Body / muted greys that were hard-coded for light UI */
   --clr-text-2: var(--ep-text-primary);
   --clr-text-3: var(--ep-text-primary);
   --clr-text-4: var(--ep-text-muted);
   --clr-text-5: var(--ep-text-muted);
   --clr-text-6: var(--ep-text-secondary);
   --clr-text-7: var(--ep-text-secondary);
   --clr-text-8: var(--ep-text-muted);
   --clr-text-9: var(--ep-text-muted);
   --clr-text-10: var(--ep-text-muted);
   --clr-text-11: var(--ep-text-secondary);
   --clr-text-12: var(--ep-text-secondary);
   --clr-text-14: var(--ep-text-muted);
   --clr-text-19: var(--ep-text-heading);
   --clr-text-20: var(--ep-text-primary);

   /* Brand */
   --clr-theme-1: var(--ep-brand-primary);
   --clr-theme-2: var(--ep-accent-red);
   --clr-theme-3: var(--ep-accent-amber);
   --clr-text-13: var(--ep-text-link);
   --clr-gradient-1: var(--ep-brand-gradient);

   /* Borders */
   --clr-border-1: var(--ep-border-color);
   --clr-border-2: var(--ep-border-color);
   --clr-border-3: var(--ep-border-color);
   --clr-border-4: var(--ep-border-light);
   --clr-footer-1: var(--ep-text-muted);

   /* App chrome surfaces */
   --clr-bg-4: var(--ep-bg-body);
   --clr-bg-5: var(--ep-bg-body);
   --clr-bg-6: var(--ep-bg-card);
   --clr-bg-7: var(--ep-bg-elevated);
   --clr-bg-8: var(--ep-bg-hover);
   --clr-bg-9: var(--ep-bg-hover);
}

/*
 * --clr-text-primary is NOT body text in Expovent — it is an inverted FILL
 * (near-black in dark, white in light) used for pagination chips, toggles, etc.
 * Keep that fill semantic so backgrounds do not invert incorrectly.
 */
:root,
[bd-theme="bd-theme-dark"] {
   --clr-text-primary: #111111;

   /* Light-theme pastel surfaces → elevated dark panels */
   --clr-bg-gray-1: var(--ep-bg-elevated);
   --clr-bg-pink: var(--ep-bg-elevated);
   --clr-bg-1: var(--ep-bg-elevated);
   --clr-bg-2: var(--ep-bg-elevated);
   --clr-bg-3: var(--ep-bg-elevated);
   --clr-bg-10: var(--ep-bg-body);
   --clr-bg-11: var(--ep-bg-elevated);
   --clr-bg-12: var(--ep-bg-elevated);
   --clr-bg-13: var(--ep-bg-elevated);
   --clr-bg-14: var(--ep-border-color);
   --clr-bg-15: var(--ep-border-color);
   --clr-bg-16: var(--ep-bg-elevated);
   --clr-bg-17: var(--ep-bg-elevated);
   --clr-bg-18: var(--ep-bg-elevated);
   --clr-bg-19: var(--ep-bg-elevated);
   --clr-bg-20: var(--ep-bg-elevated);
   --clr-bg-21: var(--ep-bg-elevated);
}

[bd-theme="bd-theme-light"] {
   --clr-text-primary: #ffffff;
   --clr-bg-gray-1: #F6F6F6;
   --clr-bg-pink: #FFF6F9;
   --clr-bg-1: #FFFCFB;
   --clr-bg-2: #F1F1F1;
   --clr-bg-3: #FFF1F5;
   --clr-bg-10: var(--ep-bg-body);
   --clr-bg-11: #FBFBFB;
   --clr-bg-12: #EBEBEB;
   --clr-bg-13: #FAFAFA;
   --clr-bg-14: #C4C4C4;
   --clr-bg-15: #D9D9D9;
   --clr-bg-16: #FFF9FA;
   --clr-bg-17: #FFF3F6;
   --clr-bg-18: #FFF0F0;
   --clr-bg-19: #FFF7EA;
   --clr-bg-20: #FAFFF8;
   --clr-bg-21: #FFF1F5;
}

/* --------------------------------------------------------------------------
   Element resets — beat main.css body/heading/paragraph hard-codes
   -------------------------------------------------------------------------- */

body {
   background-color: var(--ep-bg-body);
   color: var(--ep-text-primary);
}

h1, h2, h3, h4, h5, h6 {
   color: var(--ep-text-heading);
}

p {
   color: var(--ep-text-primary);
}

.text-muted,
.text-secondary,
.text-body-secondary {
   color: var(--ep-text-muted) !important;
}

.text-dark,
.text-black {
   color: var(--ep-text-heading) !important;
}

.text-white-50 {
   color: var(--ep-text-secondary) !important;
}