/**
 * Epsilon Design System & Theme Engine (Epsilon 2.0)
 * Contains the six canonical themes, semantic finance tokens, Aurora layers, and component classes.
 */

/* ==========================================================================
   1. THE SIX CANONICAL EPSILON THEMES (30 Variables Each)
   ========================================================================== */

/* Arctic Blue (Default, Light) */
:root,
[data-theme="arctic-blue"] {
  --bg: #EFF7FF;
  --panel: #F5FAFF;
  --panel2: #E3F0FC;
  --surface: #FFFFFF;
  --border: #D5E5F5;
  --text: #173456;
  --muted: #52708F;
  --faint: #7E98B4;
  --top-bar-text: #FFFFFF;
  --accent: #0772EA;
  --accent-dark: #1554AD;
  --on-accent: #FFFFFF;
  --hover: #E7F3FF;
  --selected: #DCEEFF;
  --success: #197347;
  --danger: #B4233E;
  --warning: #9A5700;
  --success-bg: #E1F3EA;
  --header-bg: #F5FAFF;
  --track: #E3F0FC;
  --input: #FFFFFF;
  --input-border: #BFD6EC;
  --popup: #FFFFFF;
  --icon-grey: #536B84;
  --icon-purple: #4F6BED;
  --icon-teal: #26B3FF;
  --icon-amber: #9A5700;
  --scroll-thumb: #BFD6EC;
  --scroll-thumb-hover: #0772EA;
  --disabled: #8B9DB0;

  /* Theme-derived soft tokens */
  --negative-bg: #FCE8EC;
  --warning-bg: #FEF3DC;
  --glass-edge: rgba(255, 255, 255, 0.45);
  --shadow-card: 0 4px 18px -2px rgba(23, 52, 86, 0.07);
}

/* Jade Mint (Light) */
[data-theme="jade-mint"] {
  --bg: #EAF9F2;
  --panel: #F3FCF8;
  --panel2: #D8F1E6;
  --surface: #FFFFFF;
  --border: #C6E8DB;
  --text: #14392F;
  --muted: #476F63;
  --faint: #7A9C92;
  --top-bar-text: #FFFFFF;
  --accent: #0A8268;
  --accent-dark: #066350;
  --on-accent: #FFFFFF;
  --hover: #E1F5EE;
  --selected: #CBEBDF;
  --success: #197347;
  --danger: #B4233E;
  --warning: #9A5700;
  --success-bg: #DDF3E8;
  --header-bg: #F3FCF8;
  --track: #D8F1E6;
  --input: #FFFFFF;
  --input-border: #B5DACE;
  --popup: #FFFFFF;
  --icon-grey: #4D6B62;
  --icon-purple: #5B6BD6;
  --icon-teal: #1FB5A0;
  --icon-amber: #9A5700;
  --scroll-thumb: #B5DACE;
  --scroll-thumb-hover: #0A8268;
  --disabled: #8AA39B;

  --negative-bg: #FCE8EC;
  --warning-bg: #FEF3DC;
  --glass-edge: rgba(255, 255, 255, 0.45);
  --shadow-card: 0 4px 18px -2px rgba(20, 57, 47, 0.07);
}

/* Warm Ivory (Light) */
[data-theme="warm-ivory"] {
  --bg: #FFF7ED;
  --panel: #FFFBF5;
  --panel2: #F9EAD6;
  --surface: #FFFFFF;
  --border: #EBD7BC;
  --text: #3A2412;
  --muted: #74553A;
  --faint: #A58A70;
  --top-bar-text: #FFFFFF;
  --accent: #C2531A;
  --accent-dark: #9A3E10;
  --on-accent: #FFFFFF;
  --hover: #FCEBD8;
  --selected: #F8DDBF;
  --success: #197347;
  --danger: #B4233E;
  --warning: #8A5200;
  --success-bg: #E3F1E4;
  --header-bg: #FFFBF5;
  --track: #F9EAD6;
  --input: #FFFFFF;
  --input-border: #DFC6A5;
  --popup: #FFFFFF;
  --icon-grey: #7A5B3F;
  --icon-purple: #7E57C2;
  --icon-teal: #1E9C95;
  --icon-amber: #8A5200;
  --scroll-thumb: #DFC6A5;
  --scroll-thumb-hover: #C2531A;
  --disabled: #A99B8A;

  --negative-bg: #FCE8EC;
  --warning-bg: #FDF1DD;
  --glass-edge: rgba(255, 255, 255, 0.45);
  --shadow-card: 0 4px 18px -2px rgba(58, 36, 18, 0.07);
}

/* Midnight Blue (Dark) */
[data-theme="midnight-blue"] {
  --bg: #050E1F;
  --panel: #0A1A33;
  --panel2: #10264A;
  --surface: #122E55;
  --border: #23497D;
  --text: #EAF3FF;
  --muted: #A5C0E3;
  --faint: #6A8CB4;
  --top-bar-text: #06142B;
  --accent: #4BA0FF;
  --accent-dark: #2E86FF;
  --on-accent: #06142B;
  --hover: #17376A;
  --selected: #1D4682;
  --success: #4ED6A8;
  --danger: #FF6B7D;
  --warning: #FFB44A;
  --success-bg: #0E2D28;
  --header-bg: #0A1A33;
  --track: #10264A;
  --input: #081428;
  --input-border: #23497D;
  --popup: #10264A;
  --icon-grey: #A5C0E3;
  --icon-purple: #A98CFF;
  --icon-teal: #45CFEA;
  --icon-amber: #FFB44A;
  --scroll-thumb: #23497D;
  --scroll-thumb-hover: #4BA0FF;
  --disabled: #5A7596;

  --negative-bg: rgba(255, 107, 125, 0.16);
  --warning-bg: rgba(255, 180, 74, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.1);
  --shadow-card: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
}

/* Graphite Gold (Dark) */
[data-theme="graphite-gold"] {
  --bg: #191B21;
  --panel: #20232A;
  --panel2: #292D36;
  --surface: #2D313B;
  --border: #434955;
  --text: #F5F1E8;
  --muted: #B4B0A6;
  --faint: #7F8088;
  --top-bar-text: #1A1406;
  --accent: #E9AD4B;
  --accent-dark: #C48A2C;
  --on-accent: #1A1406;
  --hover: #353A45;
  --selected: #43391F;
  --success: #5BD88F;
  --danger: #FF7080;
  --warning: #F4C66A;
  --success-bg: #17291F;
  --header-bg: #20232A;
  --track: #292D36;
  --input: #15171C;
  --input-border: #434955;
  --popup: #2D313B;
  --icon-grey: #B4B0A6;
  --icon-purple: #B79CFF;
  --icon-teal: #5ADBE6;
  --icon-amber: #E9AD4B;
  --scroll-thumb: #434955;
  --scroll-thumb-hover: #E9AD4B;
  --disabled: #7F8088;

  --negative-bg: rgba(255, 112, 128, 0.16);
  --warning-bg: rgba(244, 198, 106, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
}

/* Royal Plum (Dark) */
[data-theme="royal-plum"] {
  --bg: #21162D;
  --panel: #2A1C3A;
  --panel2: #35244A;
  --surface: #3A284F;
  --border: #53396F;
  --text: #F4EDFB;
  --muted: #C0B0D6;
  --faint: #8E7AA8;
  --top-bar-text: #1B0F2B;
  --accent: #B98AF5;
  --accent-dark: #9566DD;
  --on-accent: #1B0F2B;
  --hover: #45305E;
  --selected: #50367A;
  --success: #55D9A6;
  --danger: #FF7392;
  --warning: #FFBE55;
  --success-bg: #123027;
  --header-bg: #2A1C3A;
  --track: #35244A;
  --input: #1A1024;
  --input-border: #53396F;
  --popup: #35244A;
  --icon-grey: #C0B0D6;
  --icon-purple: #D6A8FF;
  --icon-teal: #5ADBE6;
  --icon-amber: #FFBE55;
  --scroll-thumb: #53396F;
  --scroll-thumb-hover: #B98AF5;
  --disabled: #7A6A92;

  --negative-bg: rgba(255, 115, 146, 0.16);
  --warning-bg: rgba(255, 190, 85, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   2. SEMANTIC DESIGN TOKEN ALIASES
   ========================================================================== */

:root {
  --primary: var(--accent);
  --secondary: var(--accent-dark);
  --positive: var(--success);
  --negative: var(--danger);
  --surface-card: var(--surface);
  --surface-raised: var(--panel2);
  --text-muted: var(--muted);
  --text-faint: var(--faint);
  --input-bg: var(--input);

  --accent-bg: var(--hover);
  --positive-bg: var(--success-bg);
  --investment-gold: var(--warning);
  --investment-bourse: var(--icon-purple);
  --glass-border: var(--border);
  --chart-grid: var(--border);
}

/* ==========================================================================
   3. AURORA BACKGROUND LAYERS (Lightweight Radial Gradients)
   ========================================================================== */

.aurora-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-color: var(--bg);
  transition: background-color 0.25s ease;
}

.aurora-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  transition: opacity 0.25s ease;
}

/* Arctic Blue: teal, purple and blue accent glows */
[data-theme="arctic-blue"] .aurora-layer {
  background:
    radial-gradient(circle at 10% 15%, rgba(38, 179, 255, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 88% 22%, rgba(79, 107, 237, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 45% 85%, rgba(7, 114, 234, 0.15) 0%, transparent 48%);
}

/* Jade Mint: accent top-left, accent-dark bottom-right */
[data-theme="jade-mint"] .aurora-layer {
  background:
    radial-gradient(circle at 10% 12%, rgba(10, 130, 104, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 90% 88%, rgba(6, 99, 80, 0.14) 0%, transparent 45%);
}

/* Warm Ivory: accent top-left, accent-dark bottom-right */
[data-theme="warm-ivory"] .aurora-layer {
  background:
    radial-gradient(circle at 10% 12%, rgba(194, 83, 26, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 90% 88%, rgba(154, 62, 16, 0.12) 0%, transparent 45%);
}

/* Midnight Blue (Dark): slightly stronger glow */
[data-theme="midnight-blue"] .aurora-layer {
  opacity: 0.85;
  background:
    radial-gradient(circle at 12% 12%, rgba(75, 160, 255, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(46, 134, 255, 0.16) 0%, transparent 50%);
}

/* Graphite Gold (Dark) */
[data-theme="graphite-gold"] .aurora-layer {
  opacity: 0.85;
  background:
    radial-gradient(circle at 12% 12%, rgba(233, 173, 75, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(196, 138, 44, 0.16) 0%, transparent 50%);
}

/* Royal Plum (Dark) */
[data-theme="royal-plum"] .aurora-layer {
  opacity: 0.85;
  background:
    radial-gradient(circle at 12% 12%, rgba(185, 138, 245, 0.24) 0%, transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(149, 102, 221, 0.18) 0%, transparent 50%);
}

@media (prefers-reduced-motion: reduce) {
  .aurora-bg,
  .aurora-layer {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .aurora-layer {
    opacity: 0.45;
  }
}

/* ==========================================================================
   4. SEMANTIC COMPONENT CLASSES
   ========================================================================== */

.app-shell {
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.app-sidebar {
  background-color: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

.app-topbar {
  background-color: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

.app-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-card-raised {
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--text);
}

.app-dialog {
  background-color: var(--popup);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  color: var(--text);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.4);
}

.app-input {
  background-color: var(--input) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--hover);
}

.app-button-primary {
  background-color: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent-dark);
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.15s ease, transform 0.05s ease;
  min-height: 44px;
  text-decoration: none;
}

.app-button-primary:hover {
  background-color: var(--accent-dark);
}

.app-button-secondary {
  background-color: var(--hover);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  min-height: 44px;
  text-decoration: none;
}

.app-button-secondary:hover {
  background-color: var(--selected);
  border-color: var(--accent);
}

.app-nav-item {
  color: var(--muted);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
  min-height: 44px;
  text-decoration: none;
}

.app-nav-item:hover {
  background-color: var(--hover);
  color: var(--text);
}

.app-nav-item-active {
  background-color: var(--selected);
  color: var(--accent) !important;
  font-weight: 700;
}

.app-text {
  color: var(--text);
}

.app-text-muted {
  color: var(--muted);
}

.app-text-faint {
  color: var(--faint);
}

.status-positive {
  color: var(--success) !important;
  background-color: var(--success-bg) !important;
}

.status-negative {
  color: var(--danger) !important;
  background-color: var(--negative-bg) !important;
}

.status-warning {
  color: var(--warning) !important;
  background-color: var(--warning-bg) !important;
}

/* Subtle glass appearance with opaque fallback */
@supports (backdrop-filter: blur(12px)) {
  .app-card {
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .app-sidebar,
  .app-topbar {
    background-color: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .app-dialog {
    background-color: color-mix(in srgb, var(--popup) 96%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

@media (max-width: 640px) {
  .app-card,
  .app-sidebar,
  .app-topbar,
  .app-dialog {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   5. TAILWIND TOKEN BRIDGE & WCAG AA LIGHT/DARK CONTRAST MAPPINGS
   Ensures every utility class respects active Epsilon theme variables and
   meets WCAG AA contrast even when Tailwind Play CDN injects rules later.
   ========================================================================== */

[data-theme] .app-shell,
[data-theme] .bg-slate-950,
[data-theme] .bg-slate-950\/95,
[data-theme] .bg-slate-950\/80,
[data-theme] .bg-slate-950\/70,
[data-theme] .bg-slate-950\/60 {
  background-color: var(--bg) !important;
  color: var(--text);
}

[data-theme] .app-sidebar,
[data-theme] .app-topbar,
[data-theme] .mobile-bottom-nav,
[data-theme] .bg-slate-900,
[data-theme] .bg-slate-900\/95,
[data-theme] .bg-slate-900\/80,
[data-theme] .bg-slate-900\/60,
[data-theme] .bg-slate-900\/40,
[data-theme] .bg-slate-900\/30 {
  background-color: var(--panel) !important;
}

[data-theme] .bg-slate-800,
[data-theme] .bg-slate-800\/80,
[data-theme] .bg-slate-800\/60,
[data-theme] .bg-slate-800\/50,
[data-theme] .bg-slate-800\/40,
[data-theme] .bg-slate-800\/30,
[data-theme] .bg-slate-700,
[data-theme] .bg-slate-700\/80,
[data-theme] .bg-slate-700\/60,
[data-theme] .bg-slate-700\/50,
[data-theme] .bg-slate-700\/40,
[data-theme] .bg-slate-700\/30 {
  background-color: var(--panel2) !important;
}

[data-theme] .glass-card {
  background-color: var(--surface) !important;
  color: var(--text);
  border-color: var(--border);
}

[data-theme] .app-modal > .glass-card,
[data-theme] .modal-content,
[data-theme] #theme-picker-popover {
  background-color: var(--popup) !important;
}

[data-theme] input:not([type="checkbox"]):not([type="radio"]),
[data-theme] select,
[data-theme] textarea {
  background-color: var(--input) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}

[data-theme] .via-slate-900,
[data-theme] .to-slate-900 {
  --tw-gradient-via: var(--surface) !important;
  --tw-gradient-to: var(--surface) !important;
}

[data-theme] .border-slate-800,
[data-theme] .border-slate-800\/80,
[data-theme] .border-slate-800\/60,
[data-theme] .border-slate-700,
[data-theme] .border-slate-700\/80,
[data-theme] .border-slate-700\/70,
[data-theme] .border-slate-700\/60,
[data-theme] .border-slate-700\/50,
[data-theme] .border-slate-700\/40,
[data-theme] .border-slate-700\/30,
[data-theme] .border-slate-700\/20,
[data-theme] .border-slate-600,
[data-theme] .border-slate-600\/30 {
  border-color: var(--border) !important;
}

[data-theme] .text-slate-100,
[data-theme] .text-slate-200,
[data-theme] .text-slate-300 {
  color: var(--text) !important;
}

[data-theme] .text-slate-400,
[data-theme] .text-slate-500 {
  color: var(--muted) !important;
}

[data-theme] .hover\:bg-slate-800:hover,
[data-theme] .hover\:bg-slate-700:hover,
[data-theme] .hover\:bg-slate-700\/80:hover,
[data-theme] .hover\:bg-slate-800\/40:hover,
[data-theme] .hover\:bg-slate-800\/60:hover {
  background-color: var(--hover) !important;
}

[data-theme] .hover\:text-slate-100:hover,
[data-theme] .hover\:text-slate-200:hover {
  color: var(--text) !important;
}

/* Light Epsilon Themes (arctic-blue, jade-mint, warm-ivory): map light pastel text onto WCAG AA semantic tokens */
[data-theme="arctic-blue"] .text-emerald-300,
[data-theme="arctic-blue"] .text-emerald-400,
[data-theme="arctic-blue"] .text-emerald-400\/80,
[data-theme="arctic-blue"] .text-emerald-500,
[data-theme="jade-mint"] .text-emerald-300,
[data-theme="jade-mint"] .text-emerald-400,
[data-theme="jade-mint"] .text-emerald-400\/80,
[data-theme="jade-mint"] .text-emerald-500,
[data-theme="warm-ivory"] .text-emerald-300,
[data-theme="warm-ivory"] .text-emerald-400,
[data-theme="warm-ivory"] .text-emerald-400\/80,
[data-theme="warm-ivory"] .text-emerald-500 {
  color: var(--success) !important;
}

[data-theme="arctic-blue"] .text-sky-300,
[data-theme="arctic-blue"] .text-sky-400,
[data-theme="arctic-blue"] .text-cyan-400,
[data-theme="arctic-blue"] .text-indigo-300,
[data-theme="arctic-blue"] .text-indigo-400,
[data-theme="arctic-blue"] .text-indigo-500,
[data-theme="jade-mint"] .text-sky-300,
[data-theme="jade-mint"] .text-sky-400,
[data-theme="jade-mint"] .text-cyan-400,
[data-theme="jade-mint"] .text-indigo-300,
[data-theme="jade-mint"] .text-indigo-400,
[data-theme="jade-mint"] .text-indigo-500,
[data-theme="warm-ivory"] .text-sky-300,
[data-theme="warm-ivory"] .text-sky-400,
[data-theme="warm-ivory"] .text-cyan-400,
[data-theme="warm-ivory"] .text-indigo-300,
[data-theme="warm-ivory"] .text-indigo-400,
[data-theme="warm-ivory"] .text-indigo-500 {
  color: var(--accent-dark) !important;
}

[data-theme="arctic-blue"] .text-amber-300,
[data-theme="arctic-blue"] .text-amber-400,
[data-theme="arctic-blue"] .text-amber-400\/90,
[data-theme="arctic-blue"] .text-amber-500,
[data-theme="jade-mint"] .text-amber-300,
[data-theme="jade-mint"] .text-amber-400,
[data-theme="jade-mint"] .text-amber-400\/90,
[data-theme="jade-mint"] .text-amber-500,
[data-theme="warm-ivory"] .text-amber-300,
[data-theme="warm-ivory"] .text-amber-400,
[data-theme="warm-ivory"] .text-amber-400\/90,
[data-theme="warm-ivory"] .text-amber-500 {
  color: var(--warning) !important;
}

[data-theme="arctic-blue"] .text-rose-300,
[data-theme="arctic-blue"] .text-rose-400,
[data-theme="arctic-blue"] .text-rose-400\/70,
[data-theme="arctic-blue"] .text-rose-700,
[data-theme="jade-mint"] .text-rose-300,
[data-theme="jade-mint"] .text-rose-400,
[data-theme="jade-mint"] .text-rose-400\/70,
[data-theme="jade-mint"] .text-rose-700,
[data-theme="warm-ivory"] .text-rose-300,
[data-theme="warm-ivory"] .text-rose-400,
[data-theme="warm-ivory"] .text-rose-400\/70,
[data-theme="warm-ivory"] .text-rose-700 {
  color: var(--danger) !important;
}

[data-theme="arctic-blue"] .text-white.bg-emerald-500,
[data-theme="jade-mint"] .text-white.bg-emerald-500,
[data-theme="warm-ivory"] .text-white.bg-emerald-500 {
  background-color: var(--success) !important;
  color: #FFFFFF !important;
}