/* ============================================================
   THEME BRIDGE

   Maps new design system theme variables to legacy variable names
   used throughout styles.css. This allows the new ThemePicker
   to work with existing styles during the phased migration.

   Once migration is complete, styles.css will use the new
   variable names directly and this bridge can be removed.
   ============================================================ */

/* ============================================================
   SAND (Light) - Bridge to Legacy Variables
   ============================================================ */

[data-theme="light"],
[data-theme="warm-sand"],
[data-theme="sand"],
:root {
  /* Surface colors */
  --bg-primary: var(--color-bg-page, #faf8f5);
  --bg-secondary: var(--color-bg-surface, #ffffff);
  --bg-tertiary: var(--color-bg-elevated, #f5f3f0);
  --input-bg: var(--color-bg-surface, #ffffff);

  /* Text colors */
  --text-primary: var(--color-text-primary, #2d2a26);
  --text-secondary: var(--color-text-secondary, #5c574f);

  /* Accent colors */
  --accent-primary: var(--color-border-default, #e5e1db);
  --accent-secondary: #faedcd;
  --active-item-bg: var(--color-accent, #c9a55c);
  --active-item-text: var(--color-text-inverse, #faf8f5);

  /* Borders */
  --border-color: var(--color-border-default, #e5e1db);

  /* Shadows */
  --card-shadow: var(--shadow-md, 0 4px 12px rgba(45, 42, 38, 0.08));

  /* Semantic colors */
  --success-color: var(--color-success, #3d8c5c);
  --error-color: var(--color-error, #c4524a);
  --warning-color: var(--color-warning, #c4873c);
  --info-color: var(--color-info, #4a7eb8);

  /* Function Health palette bridge */
  --fh-cream: #f2e9d8;
  --fh-cream-light: var(--color-bg-page, #faf6ef);
  --fh-cream-dark: var(--color-bg-sunken, #e8dcc8);
  --fh-orange: var(--color-accent, #c9a55c);
  --fh-orange-hover: var(--color-accent-hover, #b8934a);
  --fh-orange-dark: #d4a06d;
  --fh-text-dark: var(--color-text-primary, #2d2a26);
  --fh-text-medium: var(--color-text-secondary, #5a5650);
  --fh-text-light: var(--color-text-tertiary, #8a857d);
  --fh-success: var(--color-success, #3d8c5c);
  --fh-warning: var(--color-warning, #c4873c);
  --fh-error: var(--color-error, #c4524a);

  /* Transitions */
  --fh-ease-smooth: var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  --fh-ease-bounce: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}


/* ============================================================
   ESPRESSO (Warm Dark) - Bridge to Legacy Variables
   ============================================================ */

[data-theme="dark"]:not([data-theme-variant]),
[data-theme="starlight-mocha"],
[data-theme-variant="starlight-mocha"],
[data-theme="espresso"],
[data-theme-variant="espresso"] {
  /* Surface colors */
  --bg-primary: var(--color-bg-page, #191614);
  --bg-secondary: var(--color-bg-surface, #211d1a);
  --bg-tertiary: var(--color-bg-elevated, #2a2522);
  --input-bg: var(--color-bg-page, #191614);

  /* Text colors */
  --text-primary: var(--color-text-primary, #f2ebe3);
  --text-secondary: var(--color-text-secondary, #b5a99a);

  /* Accent colors */
  --accent-primary: var(--color-accent, #d4a574);
  --accent-secondary: #c4956a;
  --active-item-bg: var(--color-accent, #d4a574);
  --active-item-text: var(--color-text-inverse, #191614);

  /* Borders */
  --border-color: var(--color-border-default, #3d3632);

  /* Shadows */
  --card-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.3));

  /* Semantic colors */
  --success-color: var(--color-success, #7cb87c);
  --error-color: var(--color-error, #d97b7b);
  --warning-color: var(--color-warning, #e8b75a);
  --info-color: var(--color-info, #8eb4d4);

  /* Function Health palette bridge */
  --fh-cream: var(--color-bg-elevated, #2d2825);
  --fh-cream-light: var(--color-bg-surface, #211d1a);
  --fh-cream-dark: var(--color-bg-sunken, #13110f);
  --fh-orange: var(--color-accent, #d4a574);
  --fh-orange-hover: var(--color-accent-hover, #e0b68a);
  --fh-orange-dark: #c4956a;
  --fh-text-dark: var(--color-text-primary, #f2ebe3);
  --fh-text-medium: var(--color-text-secondary, #b5a99a);
  --fh-text-light: var(--color-text-tertiary, #7d7269);
  --fh-success: var(--color-success, #7cb87c);
  --fh-warning: var(--color-warning, #e8b75a);
  --fh-error: var(--color-error, #d97b7b);
}


/* ============================================================
   MOONLIGHT (Cool Dark) - Bridge to Legacy Variables
   ============================================================ */

[data-theme="midnight-ocean"],
[data-theme-variant="midnight-ocean"],
[data-theme="moonlight"],
[data-theme-variant="moonlight"] {
  /* Surface colors */
  --bg-primary: var(--color-bg-page, #0c1221);
  --bg-secondary: var(--color-bg-surface, #141c2e);
  --bg-tertiary: var(--color-bg-elevated, #1c2640);
  --input-bg: var(--color-bg-surface, #141c2e);

  /* Text colors */
  --text-primary: var(--color-text-primary, #e8f0fa);
  --text-secondary: var(--color-text-secondary, #94a8c4);

  /* Accent colors */
  --accent-primary: var(--color-accent, #60a5fa);
  --accent-secondary: #38bdf8;
  --active-item-bg: var(--color-accent, #60a5fa);
  --active-item-text: var(--color-text-inverse, #0c1221);

  /* Borders */
  --border-color: var(--color-border-default, #243352);

  /* Shadows */
  --card-shadow: var(--shadow-md, 0 4px 12px rgba(0, 8, 20, 0.35));

  /* Semantic colors */
  --success-color: var(--color-success, #4ade80);
  --error-color: var(--color-error, #f87171);
  --warning-color: var(--color-warning, #fbbf24);
  --info-color: var(--color-info, #60a5fa);

  /* Function Health palette bridge - adapted for cool tones */
  --fh-cream: var(--color-bg-elevated, #1c2640);
  --fh-cream-light: var(--color-bg-surface, #141c2e);
  --fh-cream-dark: var(--color-bg-sunken, #080d18);
  --fh-orange: var(--color-accent, #60a5fa);
  --fh-orange-hover: var(--color-accent-hover, #7db8fc);
  --fh-orange-dark: #3b8ef5;
  --fh-text-dark: var(--color-text-primary, #e8f0fa);
  --fh-text-medium: var(--color-text-secondary, #94a8c4);
  --fh-text-light: var(--color-text-tertiary, #5c7091);
  --fh-success: var(--color-success, #4ade80);
  --fh-warning: var(--color-warning, #fbbf24);
  --fh-error: var(--color-error, #f87171);
}


/* ============================================================
   BAUHAUS (Light) - Bridge to Legacy Variables
   Bold geometric aesthetic with primary colors
   ============================================================ */

[data-theme="bauhaus"],
[data-theme-variant="bauhaus"] {
  /* Surface colors */
  --bg-primary: var(--color-bg-page, #fafafa);
  --bg-secondary: var(--color-bg-surface, #ffffff);
  --bg-tertiary: var(--color-bg-elevated, #f5f5f5);
  --input-bg: var(--color-bg-surface, #ffffff);

  /* Text colors */
  --text-primary: var(--color-text-primary, #1a1a1a);
  --text-secondary: var(--color-text-secondary, #4a4a4a);

  /* Accent colors - bold Bauhaus red */
  --accent-primary: var(--color-border-default, #1a1a1a);
  --accent-secondary: #ffd500;
  --active-item-bg: var(--color-accent, #dd3333);
  --active-item-text: var(--color-text-inverse, #ffffff);

  /* Borders - strong black */
  --border-color: var(--color-border-default, #1a1a1a);

  /* Shadows - geometric offset */
  --card-shadow: var(--shadow-md, 4px 4px 0 rgba(0, 0, 0, 0.9));

  /* Semantic colors */
  --success-color: var(--color-success, #2d8c3c);
  --error-color: var(--color-error, #dd3333);
  --warning-color: var(--color-warning, #e6a000);
  --info-color: var(--color-info, #1a5fb4);

  /* Function Health palette bridge - Bauhaus primary */
  --fh-cream: #f5f5f5;
  --fh-cream-light: var(--color-bg-page, #fafafa);
  --fh-cream-dark: var(--color-bg-sunken, #e8e8e8);
  --fh-orange: var(--color-accent, #dd3333);
  --fh-orange-hover: var(--color-accent-hover, #c42b2b);
  --fh-orange-dark: #b82424;
  --fh-text-dark: var(--color-text-primary, #1a1a1a);
  --fh-text-medium: var(--color-text-secondary, #4a4a4a);
  --fh-text-light: var(--color-text-tertiary, #6a6a6a);
  --fh-success: var(--color-success, #2d8c3c);
  --fh-warning: var(--color-warning, #e6a000);
  --fh-error: var(--color-error, #dd3333);

  /* Transitions - snappy for Bauhaus */
  --fh-ease-smooth: var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  --fh-ease-bounce: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}


/* ============================================================
   MIAMI (Light) - Bridge to Legacy Variables
   Pastel art deco with teal and coral
   ============================================================ */

[data-theme="miami"],
[data-theme-variant="miami"] {
  /* Surface colors - blush pink */
  --bg-primary: var(--color-bg-page, #fff5f7);
  --bg-secondary: var(--color-bg-surface, #ffffff);
  --bg-tertiary: var(--color-bg-elevated, #fef0f3);
  --input-bg: var(--color-bg-surface, #ffffff);

  /* Text colors */
  --text-primary: var(--color-text-primary, #2d3748);
  --text-secondary: var(--color-text-secondary, #5a6578);

  /* Accent colors - vibrant teal */
  --accent-primary: var(--color-border-default, #fad4dc);
  --accent-secondary: #ff8fa3;
  --active-item-bg: var(--color-accent, #00bfb3);
  --active-item-text: var(--color-text-inverse, #ffffff);

  /* Borders - soft blush */
  --border-color: var(--color-border-default, #fad4dc);

  /* Shadows - soft diffused */
  --card-shadow: var(--shadow-md, 0 8px 24px rgba(255, 143, 163, 0.15));

  /* Semantic colors */
  --success-color: var(--color-success, #00a896);
  --error-color: var(--color-error, #e53e6d);
  --warning-color: var(--color-warning, #f5a623);
  --info-color: var(--color-info, #00bfb3);

  /* Function Health palette bridge - Miami pastels */
  --fh-cream: #fef0f3;
  --fh-cream-light: var(--color-bg-page, #fff5f7);
  --fh-cream-dark: var(--color-bg-sunken, #f8dce2);
  --fh-orange: var(--color-accent, #00bfb3);
  --fh-orange-hover: var(--color-accent-hover, #00a89d);
  --fh-orange-dark: #009187;
  --fh-text-dark: var(--color-text-primary, #2d3748);
  --fh-text-medium: var(--color-text-secondary, #5a6578);
  --fh-text-light: var(--color-text-tertiary, #8b95a5);
  --fh-success: var(--color-success, #00a896);
  --fh-warning: var(--color-warning, #f5a623);
  --fh-error: var(--color-error, #e53e6d);

  /* Transitions */
  --fh-ease-smooth: var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  --fh-ease-bounce: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}


/* ============================================================
   MOSSGLOW (Dark) - Bridge to Legacy Variables
   Near-black forest with bioluminescent emerald accent
   ============================================================ */

[data-theme="emerald-moon"],
[data-theme-variant="emerald-moon"],
[data-theme="mossglow"],
[data-theme-variant="mossglow"] {
  /* Surface colors - near-black forest */
  --bg-primary: var(--color-bg-page, #060d09);
  --bg-secondary: var(--color-bg-surface, #0a1610);
  --bg-tertiary: var(--color-bg-elevated, #0e1f16);
  --input-bg: var(--color-bg-surface, #0a1610);

  /* Text colors */
  --text-primary: var(--color-text-primary, #d4eadc);
  --text-secondary: var(--color-text-secondary, #7da98c);

  /* Accent colors - bioluminescent emerald */
  --accent-primary: var(--color-accent, #34d399);
  --accent-secondary: #10b981;
  --active-item-bg: #0a4d1f;
  --active-item-text: #a7f3d0;

  /* Borders */
  --border-color: var(--color-border-default, #1a3526);

  /* Shadows */
  --card-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.55));

  /* Semantic colors */
  --success-color: var(--color-success, #4ade80);
  --error-color: var(--color-error, #f87171);
  --warning-color: var(--color-warning, #fbbf24);
  --info-color: var(--color-info, #67e8f9);

  /* Function Health palette bridge - deep forest */
  --fh-cream: var(--color-bg-elevated, #0e1f16);
  --fh-cream-light: var(--color-bg-surface, #0a1610);
  --fh-cream-dark: var(--color-bg-sunken, #030805);
  --fh-orange: var(--color-accent, #34d399);
  --fh-orange-hover: var(--color-accent-hover, #4ade80);
  --fh-orange-dark: #10b981;
  --fh-text-dark: var(--color-text-primary, #d4eadc);
  --fh-text-medium: var(--color-text-secondary, #7da98c);
  --fh-text-light: var(--color-text-tertiary, #4a7a5c);
  --fh-success: var(--color-success, #4ade80);
  --fh-warning: var(--color-warning, #fbbf24);
  --fh-error: var(--color-error, #f87171);

  /* Transitions */
  --fh-ease-smooth: var(--ease-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  --fh-ease-bounce: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}


/* ============================================================
   DARK THEME SELECTOR ALIASES

   The legacy styles.css uses [data-theme="dark"] for component
   overrides. We need espresso, moonlight, and mossglow to also
   trigger those rules.

   Since CSS doesn't support selector aliasing, we set a marker
   that JavaScript can use, OR we rely on the ThemePicker
   always also setting data-theme="dark" for dark themes.
   ============================================================ */

/*
   Alternative: Have ThemePicker set both attributes:
   - data-theme="espresso" (for new system)
   - data-dark-mode="true" (for legacy selectors)

   For now, we ensure dark themes map correctly for
   backward compatibility via the CSS selector aliases
   already defined above.
*/