@charset "UTF-8";
/* ==========================================================================
   THEMES.SCSS — Yoria Shinobi Design System & Theme Engine
   ==========================================================================
   This file implements 6 cohesive, custom-styled visual themes based on
   the strategic design principles of Eduardo Reyna (5050 agency) and Yoria Shinobi.

   Supports full Light/Dark skinning via [data-theme] root toggles, and
   dynamically updates layout elements based on the active [data-style] selector.
   ========================================================================== */
@import url("../css/local-fonts.css");
/* ==========================================
   1. NEON REBEL (Kuro-Brutalism)
   ========================================== */
/* 1. NEON REBEL — oklch(croma máximo, Display P3) — DESIGN_DOCTRINE §2.5 */
[data-style=neon-rebel] {
  --font-title: Fira Code, monospace;
  --font-body: Fira Code, monospace;
  --border-radius-base: 0px;
  --transition-speed: 0.1s;
}
[data-style=neon-rebel][data-theme=light] {
  --bg-app: oklch(0.97 0.003 270);
  --bg-panel: oklch(1.00 0.00 0);
  --border-color: oklch(0.15 0.00 0);
  --text-primary: oklch(0.18 0.01 270);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.55 0.30 330);
  --accent-glow: oklch(0.55 0.30 330 / 0.2);
  --shadow-base: 4px 4px 0px oklch(0.15 0.00 0);
  --input-focus-border: oklch(0.70 0.28 210);
}
[data-style=neon-rebel][data-theme=dark] {
  --bg-app: oklch(0.12 0.01 280);
  --bg-panel: oklch(0.16 0.01 280);
  --border-color: oklch(0.70 0.30 150);
  --text-primary: oklch(0.97 0.003 270);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.70 0.28 210);
  --accent-glow: oklch(0.70 0.28 210 / 0.2);
  --shadow-base: 4px 4px 0px oklch(0.70 0.30 150);
  --input-focus-border: oklch(0.65 0.30 330);
}

/* ==========================================
   2. AETHER MINIMAL (Gema-Material)
   ========================================== */
/* 2. AETHER MINIMAL — Gema Clara — DESIGN_DOCTRINE §2.1 (DEFAULT) */
[data-style=aether-minimal] {
  --font-title: Outfit, sans-serif;
  --font-body: DM Sans, sans-serif;
  --border-radius-base: 16px;
  --transition-speed: 0.3s;
  --card-padding: 1.5rem;
  --card-border-width: 1px;
}
[data-style=aether-minimal][data-theme=light] {
  --bg-app: oklch(0.99 0.002 250);
  --bg-panel: oklch(1.00 0.00 0);
  --border-color: oklch(0.91 0.01 250);
  --text-primary: oklch(0.20 0.015 250);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.60 0.15 260);
  --accent-glow: oklch(0.60 0.15 260 / 0.15);
  --shadow-base: 0 4px 12px color-mix(in oklch, oklch(0.20 0.015 250) 8%, transparent);
  --input-focus-border: oklch(0.60 0.15 260);
}
[data-style=aether-minimal][data-theme=dark] {
  --bg-app: oklch(0.14 0.02 240);
  --bg-panel: oklch(0.19 0.02 240);
  --border-color: oklch(0.27 0.03 240);
  --text-primary: oklch(0.98 0.005 245);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.72 0.15 210);
  --accent-glow: oklch(0.72 0.15 210 / 0.15);
  --shadow-base: 0 4px 12px oklch(0.05 0.01 240 / 0.30);
  --input-focus-border: oklch(0.72 0.15 210);
}

/* ==========================================
   3. AEGIS EXECUTIVE (Teal-Shield)
   ========================================== */
[data-style=aegis-executive] {
  --font-title: Outfit, sans-serif;
  --font-body: DM Sans, sans-serif;
  --border-radius-base: 2px;
  --transition-speed: 0.2s;
  --card-padding: 0.75rem;
  --card-border-width: 1px;
}
[data-style=aegis-executive][data-theme=light] {
  --bg-app: oklch(0.99 0.002 250);
  --bg-panel: oklch(1.00 0.00 0);
  --border-color: oklch(0.88 0.02 200);
  --text-primary: oklch(0.20 0.015 250);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.53 0.14 180);
  --accent-glow: oklch(0.53 0.14 180 / 0.15);
  --shadow-base: 0 4px 12px oklch(0.53 0.14 180 / 0.08);
  --input-focus-border: oklch(0.53 0.14 180);
}
[data-style=aegis-executive][data-theme=dark] {
  --bg-app: oklch(0.10 0.04 175);
  --bg-panel: oklch(0.17 0.05 170);
  --border-color: oklch(0.28 0.07 175);
  --text-primary: oklch(0.98 0.002 160);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.74 0.15 190);
  --accent-glow: oklch(0.74 0.15 190 / 0.15);
  --shadow-base: 0 4px 16px oklch(0.08 0.04 175 / 0.50);
  --input-focus-border: oklch(0.74 0.15 190);
}

/* ==========================================
   4. CHRONOS AURA (Brand Premium)
   ========================================== */
[data-style=chronos-aura] {
  --font-title: Playfair Display, serif;
  --font-body: DM Sans, sans-serif;
  --border-radius-base: 0px;
  --transition-speed: 0.35s;
  --card-padding: 1.5rem;
  --card-border-width: 0px;
}
[data-style=chronos-aura][data-theme=light] {
  --bg-app: oklch(0.99 0.01 80);
  --bg-panel: oklch(1.00 0.00 0);
  --border-color: oklch(0.90 0.02 70);
  --text-primary: oklch(0.17 0.01 50);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.62 0.10 80);
  --accent-glow: oklch(0.62 0.10 80 / 0.15);
  --shadow-base: 0 10px 30px -10px oklch(0.62 0.10 80 / 0.08);
  --input-focus-border: oklch(0.62 0.10 80);
}
[data-style=chronos-aura][data-theme=dark] {
  --bg-app: oklch(0.13 0.005 60);
  --bg-panel: oklch(0.17 0.007 60);
  --border-color: oklch(0.28 0.01 60);
  --text-primary: oklch(0.99 0.008 80);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.75 0.13 80);
  --accent-glow: oklch(0.75 0.13 80 / 0.15);
  --shadow-base: 0 12px 40px oklch(0.05 0.005 0 / 0.60);
  --input-focus-border: oklch(0.75 0.13 80);
}

/* ==========================================
   5. COSMOS IGNITE (Vortex-WOW)
   ========================================== */
[data-style=cosmos-ignite] {
  --font-title: Outfit, sans-serif;
  --font-body: DM Sans, sans-serif;
  --border-radius-base: 16px;
  --transition-speed: 0.4s;
}
[data-style=cosmos-ignite][data-theme=light] {
  --bg-app: oklch(0.98 0.008 285);
  --bg-panel: color-mix(in oklch, oklch(0.95 0.02 240) 60%, transparent);
  --border-color: oklch(0.58 0.20 295 / 0.20);
  --text-primary: oklch(0.25 0.08 295);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.60 0.22 350);
  --accent-glow: oklch(0.60 0.22 350 / 0.20);
  --shadow-base: 0 10px 25px -5px oklch(0.15 0.12 260 / 0.15);
  --input-focus-border: oklch(0.55 0.23 295);
}
[data-style=cosmos-ignite][data-theme=dark] {
  --bg-app: oklch(0.07 0.03 285);
  --bg-panel: oklch(0.11 0.04 285 / 0.65);
  --border-color: oklch(0.65 0.30 330 / 0.25);
  --text-primary: oklch(0.98 0.005 285);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.65 0.26 350);
  --accent-glow: oklch(0.65 0.26 350 / 0.30);
  --shadow-base: 0 15px 35px oklch(0.65 0.26 350 / 0.25);
  --input-focus-border: oklch(0.70 0.30 330);
}

/* 6. LEXIA CHRONICLE — oklch(sepia cálido) — DESIGN_DOCTRINE §2.6 */
[data-style=lexia-chronicle] {
  --font-title: Playfair Display, serif;
  --font-body: Playfair Display, serif;
  --border-radius-base: 0px;
  --transition-speed: 0.2s;
  --card-padding: 1.25rem;
  --card-border-width: 2px;
}
[data-style=lexia-chronicle][data-theme=light] {
  --bg-app: oklch(0.96 0.015 75);
  --bg-panel: oklch(0.99 0.005 75);
  --border-color: oklch(0.35 0.02 60);
  --text-primary: oklch(0.17 0.01 50);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.45 0.17 25);
  --accent-glow: oklch(0.45 0.17 25 / 0.12);
  --shadow-base: 1px 1px 3px oklch(0.20 0.01 60 / 0.10);
  --input-focus-border: oklch(0.45 0.17 25);
}
[data-style=lexia-chronicle][data-theme=dark] {
  --bg-app: oklch(0.14 0.007 60);
  --bg-panel: oklch(0.18 0.008 60);
  --border-color: oklch(0.32 0.01 60);
  --text-primary: oklch(0.93 0.012 75);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.60 0.18 25);
  --accent-glow: oklch(0.60 0.18 25 / 0.15);
  --shadow-base: 1px 1px 4px oklch(0.10 0.01 60 / 0.40);
  --input-focus-border: oklch(0.60 0.18 25);
}

/* 7. GOOGLE STYLE — Material Design / Google Workspace */
[data-style=google-style] {
  --font-title: 'Google Sans Flex', 'Roboto', sans-serif;
  --font-body: 'Google Sans Flex', 'Roboto', sans-serif;
  --border-radius-base: 24px;
  --transition-speed: 0.2s;
}
[data-style=google-style][data-theme=light] {
  --bg-app: oklch(0.98 0.01 250);
  --bg-panel: #ffffff;
  --border-color: oklch(0.90 0.01 250);
  --text-primary: oklch(0.25 0.01 250);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.53 0.17 256);
  --accent-glow: oklch(0.53 0.17 256 / 0.1);
  --shadow-base: 0 1px 2px 0 oklch(0.25 0.01 250 / 0.30), 0 1px 3px 1px oklch(0.25 0.01 250 / 0.15);
  --input-focus-border: oklch(0.53 0.17 256);
}
[data-style=google-style][data-theme=dark] {
  --bg-app: oklch(0.12 0.01 250);
  --bg-panel: oklch(0.18 0.01 250);
  --border-color: oklch(0.30 0.01 250);
  --text-primary: oklch(0.95 0.01 250);
  --text-muted: color-mix(in oklch, var(--text-primary) 85%, transparent);
  --accent-color: oklch(0.70 0.14 256);
  --accent-glow: oklch(0.70 0.14 256 / 0.2);
  --shadow-base: 0 1px 3px 0 oklch(0.00 0.00 0 / 0.40);
  --input-focus-border: oklch(0.70 0.14 256);
}

/* 8. L3M CORPORATE (Media Kit) */
[data-style=l3m-corporate] {
  --font-title: 'Oswald', sans-serif;
  --font-body: 'Urbanist', sans-serif;
  --font-heading: 'Bebas Neue', sans-serif;
  --border-radius-base: 12px;
  --transition-speed: 0.3s;
}
[data-style=l3m-corporate][data-theme=light] {
  --bg-app: #d7e6e0;
  --bg-panel: #ffffff;
  --border-color: #5d9190;
  --text-primary: #2A5756;
  --text-muted: color-mix(in oklch, #2A5756 85%, transparent);
  --shadow-base: 0 4px 12px rgba(93, 145, 144, 0.1);
}
[data-style=l3m-corporate][data-theme=dark] {
  --bg-app: #222d2d;
  --bg-panel: #1b2424;
  --border-color: #5d9190;
  --text-primary: #EAF2EF;
  --text-muted: color-mix(in oklch, #EAF2EF 70%, transparent);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body {
  font-family: var(--font-body), sans-serif !important;
  background-color: var(--bg-app) !important;
  color: var(--text-primary) !important;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, var(--font-title)), sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
[data-style=cosmos-ignite] h1.gradient-title, [data-style=cosmos-ignite] h1.wf-page-title, [data-style=cosmos-ignite] h1:is(h1, h2),
[data-style=cosmos-ignite] h2.gradient-title,
[data-style=cosmos-ignite] h2.wf-page-title,
[data-style=cosmos-ignite] h2:is(h1, h2),
[data-style=cosmos-ignite] h3.gradient-title,
[data-style=cosmos-ignite] h3.wf-page-title,
[data-style=cosmos-ignite] h3:is(h1, h2),
[data-style=cosmos-ignite] h4.gradient-title,
[data-style=cosmos-ignite] h4.wf-page-title,
[data-style=cosmos-ignite] h4:is(h1, h2),
[data-style=cosmos-ignite] h5.gradient-title,
[data-style=cosmos-ignite] h5.wf-page-title,
[data-style=cosmos-ignite] h5:is(h1, h2),
[data-style=cosmos-ignite] h6.gradient-title,
[data-style=cosmos-ignite] h6.wf-page-title,
[data-style=cosmos-ignite] h6:is(h1, h2) {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in oklch, var(--text-primary) 70%, var(--accent-color)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* Main rendering area & grid components */
.wf-page,
.wf-section {
  background-color: var(--bg-app) !important;
  transition: all var(--transition-speed) ease;
}

/* ── Typography & Data Grids (Sofia Darko Guidelines) ── */
.tabular-data,
.table,
.chart-y-axis-label {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.table {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.table th {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-color) !important;
}
.table tbody tr {
  transition: background-color var(--transition-speed) ease;
}
.table tbody tr:hover {
  background-color: color-mix(in oklch, var(--text-primary) 4%, transparent) !important;
}
.table td {
  vertical-align: middle;
  border-bottom: 1px solid rgba(120, 120, 120, 0.1) !important;
}

/* ── Modals & Drawers (Glassmorphism & Shadows) ── */
.modal-content,
.offcanvas {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border-radius: calc(var(--border-radius-base) * 1.5) !important;
  /* Base glassmorphism for all, enhanced in specific themes */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-header,
.offcanvas-header {
  border-bottom: 1px solid var(--border-color) !important;
}
.modal-header h5,
.offcanvas-header h5 {
  font-family: var(--font-title);
  font-weight: 700;
}

.modal-footer {
  border-top: 1px solid var(--border-color) !important;
}

/* ── Badges & Alerts (Tinted, not harsh) ── */
.badge {
  font-family: var(--font-title);
  font-weight: 600;
  padding: 0.35em 0.65em;
  border-radius: var(--border-radius-base);
}

.alert {
  background-color: var(--bg-panel) !important;
  border-left: 4px solid var(--accent-color) !important;
  border-top: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--border-radius-base) !important;
  box-shadow: var(--shadow-base);
}

.wf-card {
  background-color: var(--bg-panel) !important;
  border: var(--card-border-width, 1px) solid var(--border-color) !important;
  border-radius: var(--border-radius-base) !important;
  padding: var(--card-padding, 1.5rem);
  box-shadow: var(--shadow-base) !important;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
}
.wf-card:hover {
  transform: translateY(-2px);
}
[data-style=cosmos-ignite] .wf-card:hover {
  box-shadow: 0 15px 30px rgba(124, 58, 237, 0.3) !important;
  transform: translateY(-4px) scale(1.01);
}

/* Forms & Inputs */
.wf-input,
.form-control,
.form-select {
  background-color: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-base);
  font-family: var(--font-body) !important;
  transition: all var(--transition-speed) ease;
}
.wf-input:focus,
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}
.wf-input:disabled, .wf-input[disabled],
.form-control:disabled,
.form-control[disabled],
.form-select:disabled,
.form-select[disabled] {
  background-color: rgba(120, 120, 120, 0.1) !important;
  opacity: 0.6;
  cursor: not-allowed;
  border-style: dashed !important;
}
.wf-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Buttons and Interactive States */
.wf-button,
.btn {
  font-family: var(--font-title) !important;
  border-radius: var(--border-radius-base) !important;
  transition: all var(--transition-speed) ease;
  font-weight: 600;
  padding: var(--btn-padding, 0.5rem 1rem);
}
.wf-button:focus, .wf-button:active, .wf-button.active, .wf-button.selected,
.btn:focus,
.btn:active,
.btn.active,
.btn.selected {
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  transform: translateY(1px);
  outline: none !important;
}
.wf-button.btn-primary:hover,
.btn.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px var(--accent-glow) !important;
}
.wf-button.btn-secondary:hover,
.btn.btn-secondary:hover {
  filter: brightness(0.95);
}
.wf-button.btn-outline-secondary,
.btn.btn-outline-secondary {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  background-color: transparent !important;
}
.wf-button.btn-outline-secondary:hover:not(:disabled),
.btn.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--border-color) !important;
  color: var(--bg-panel) !important;
}

/* Glassmorphic elements for Cosmos WOW */
[data-style=cosmos-ignite] .wf-card,
[data-style=cosmos-ignite] .wf-metadata {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
[data-style=cosmos-ignite] .btn-primary, [data-style=cosmos-ignite] .bg-primary, [data-style=cosmos-ignite] .text-bg-primary, [data-style=cosmos-ignite] .alert-primary, [data-style=cosmos-ignite] .badge.bg-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in oklch, var(--text-primary) 70%, var(--accent-color))) !important;
  border: none !important;
  color: var(--bg-app) !important;
}

/* Aegis Executive - High Density & Sharp */
[data-style=aegis-executive] p, [data-style=aegis-executive] .text-muted, [data-style=aegis-executive] .badge {
  letter-spacing: -0.01em;
}
[data-style=aegis-executive] .wf-card {
  box-shadow: none !important;
}

/* Chronos Aura - Editorial Top Border */
[data-style=chronos-aura] .wf-card {
  border-top: 3px solid var(--accent-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}

/* Lexia Chronicle - Brutalist Archival */
[data-style=lexia-chronicle] p {
  line-height: 1.75 !important;
  letter-spacing: 0.01em !important;
}
[data-style=lexia-chronicle] .badge, [data-style=lexia-chronicle] .text-uppercase {
  font-family: "Fira Code", monospace !important;
  border: 1px solid var(--border-color) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}
[data-style=lexia-chronicle] .wf-card {
  border: 2px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--border-color) !important;
}
[data-style=lexia-chronicle] .wf-input, [data-style=lexia-chronicle] .btn {
  border: 2px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--border-color) !important;
}
[data-style=lexia-chronicle] .wf-input:hover, [data-style=lexia-chronicle] .wf-input:focus, [data-style=lexia-chronicle] .btn:hover, [data-style=lexia-chronicle] .btn:focus {
  box-shadow: 1px 1px 0 var(--border-color) !important;
  transform: translate(2px, 2px);
}

/* Floating Switcher Controls */
.theme-switcher-panel {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1040;
  max-width: 320px;
  border-radius: 12px;
  background-color: var(--bg-panel);
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-base);
  transition: all var(--transition-speed) ease;
  font-family: Outfit, sans-serif;
}

/* 01 Sapphire — Azul zafiro corporativo profundo */
:root[data-palette=sapphire][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(55% 0.22 270deg);
  --accent-secondary: oklch(75% 0.15 80deg);
  --accent-hover: oklch(45% 0.24 270deg);
  --bg-base: oklch(99% 0.003 255deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.002 255deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.002 255deg);
  --border-color: color-mix(in oklch, oklch(55% 0.22 270deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(55% 0.22 270deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(55% 0.22 270deg), oklch(from oklch(55% 0.22 270deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.15 80deg), oklch(from oklch(75% 0.15 80deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(55% 0.22 270deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(55% 0.22 270deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(55% 0.22 270deg) 40%, transparent);
  --color-chart-1: oklch(55% 0.22 270deg);
  --color-chart-2: oklch(75% 0.15 80deg);
  --color-chart-3: oklch(from oklch(55% 0.22 270deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(55% 0.22 270deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(55% 0.22 270deg) l c calc(h + 180));
}

:root[data-palette=sapphire][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(70% 0.18 260deg);
  --accent-secondary: oklch(85% 0.15 80deg);
  --accent-hover: oklch(80% 0.15 258deg);
  --bg-base: oklch(10% 0.02 260deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.025 258deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.025 258deg);
  --border-color: color-mix(in oklch, oklch(70% 0.18 260deg) 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(70% 0.18 260deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(70% 0.18 260deg), oklch(from oklch(70% 0.18 260deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(85% 0.15 80deg), oklch(from oklch(85% 0.15 80deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(70% 0.18 260deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(70% 0.18 260deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(70% 0.18 260deg) 40%, transparent);
  --color-chart-1: oklch(70% 0.18 260deg);
  --color-chart-2: oklch(85% 0.15 80deg);
  --color-chart-3: oklch(from oklch(70% 0.18 260deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(70% 0.18 260deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(70% 0.18 260deg) l c calc(h + 180));
}

/* 02 Arctic — Azul hielo etéreo */
:root[data-palette=arctic][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(68% 0.14 215deg);
  --accent-secondary: oklch(80% 0.1 320deg);
  --accent-hover: oklch(58% 0.16 213deg);
  --bg-base: oklch(99% 0.004 230deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.003 228deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.003 228deg);
  --border-color: color-mix(in oklch, oklch(68% 0.14 215deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(68% 0.14 215deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(68% 0.14 215deg), oklch(from oklch(68% 0.14 215deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(80% 0.1 320deg), oklch(from oklch(80% 0.1 320deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(68% 0.14 215deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(68% 0.14 215deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(68% 0.14 215deg) 40%, transparent);
  --color-chart-1: oklch(68% 0.14 215deg);
  --color-chart-2: oklch(80% 0.1 320deg);
  --color-chart-3: oklch(from oklch(68% 0.14 215deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(68% 0.14 215deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(68% 0.14 215deg) l c calc(h + 180));
}

:root[data-palette=arctic][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(80% 0.1 210deg);
  --accent-secondary: oklch(90% 0.1 320deg);
  --accent-hover: oklch(88% 0.08 208deg);
  --bg-base: oklch(10% 0.015 235deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.018 232deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.018 232deg);
  --border-color: color-mix(in oklch, oklch(80% 0.1 210deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(80% 0.1 210deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(80% 0.1 210deg), oklch(from oklch(80% 0.1 210deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(90% 0.1 320deg), oklch(from oklch(90% 0.1 320deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(80% 0.1 210deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(80% 0.1 210deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(80% 0.1 210deg) 40%, transparent);
  --color-chart-1: oklch(80% 0.1 210deg);
  --color-chart-2: oklch(90% 0.1 320deg);
  --color-chart-3: oklch(from oklch(80% 0.1 210deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(80% 0.1 210deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(80% 0.1 210deg) l c calc(h + 180));
}

/* 03 Teal — Cian-verde profundo */
:root[data-palette=teal][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(60% 0.17 190deg);
  --accent-secondary: oklch(65% 0.18 35deg);
  --accent-hover: oklch(50% 0.19 188deg);
  --bg-base: oklch(98% 0.005 195deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.003 193deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.003 193deg);
  --border-color: color-mix(in oklch, oklch(60% 0.17 190deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(60% 0.17 190deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(60% 0.17 190deg), oklch(from oklch(60% 0.17 190deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(65% 0.18 35deg), oklch(from oklch(65% 0.18 35deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(60% 0.17 190deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(60% 0.17 190deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(60% 0.17 190deg) 40%, transparent);
  --color-chart-1: oklch(60% 0.17 190deg);
  --color-chart-2: oklch(65% 0.18 35deg);
  --color-chart-3: oklch(from oklch(60% 0.17 190deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(60% 0.17 190deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(60% 0.17 190deg) l c calc(h + 180));
}

:root[data-palette=teal][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(74% 0.15 185deg);
  --accent-secondary: oklch(75% 0.18 35deg);
  --accent-hover: oklch(82% 0.12 183deg);
  --bg-base: oklch(10% 0.03 195deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.035 192deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.035 192deg);
  --border-color: color-mix(in oklch, oklch(74% 0.15 185deg) 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(74% 0.15 185deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(74% 0.15 185deg), oklch(from oklch(74% 0.15 185deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.18 35deg), oklch(from oklch(75% 0.18 35deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(74% 0.15 185deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(74% 0.15 185deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(74% 0.15 185deg) 40%, transparent);
  --color-chart-1: oklch(74% 0.15 185deg);
  --color-chart-2: oklch(75% 0.18 35deg);
  --color-chart-3: oklch(from oklch(74% 0.15 185deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(74% 0.15 185deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(74% 0.15 185deg) l c calc(h + 180));
}

/* 04 Indigo — Índigo oscuro intelectual */
:root[data-palette=indigo][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(52% 0.24 285deg);
  --accent-secondary: oklch(70% 0.18 160deg);
  --accent-hover: oklch(42% 0.26 283deg);
  --bg-base: oklch(99% 0.004 285deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.003 283deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.003 283deg);
  --border-color: color-mix(in oklch, oklch(52% 0.24 285deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(52% 0.24 285deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(52% 0.24 285deg), oklch(from oklch(52% 0.24 285deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(70% 0.18 160deg), oklch(from oklch(70% 0.18 160deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(52% 0.24 285deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(52% 0.24 285deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(52% 0.24 285deg) 40%, transparent);
  --color-chart-1: oklch(52% 0.24 285deg);
  --color-chart-2: oklch(70% 0.18 160deg);
  --color-chart-3: oklch(from oklch(52% 0.24 285deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(52% 0.24 285deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(52% 0.24 285deg) l c calc(h + 180));
}

:root[data-palette=indigo][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(70% 0.2 280deg);
  --accent-secondary: oklch(80% 0.18 160deg);
  --accent-hover: oklch(80% 0.16 278deg);
  --bg-base: oklch(9% 0.03 285deg);
  --bg-panel: color-mix(in oklch, oklch(14% 0.035 282deg) 70%, transparent);
  --bg-panel-solid: oklch(14% 0.035 282deg);
  --border-color: color-mix(in oklch, oklch(70% 0.2 280deg) 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(70% 0.2 280deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(70% 0.2 280deg), oklch(from oklch(70% 0.2 280deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(80% 0.18 160deg), oklch(from oklch(80% 0.18 160deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(70% 0.2 280deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(70% 0.2 280deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(70% 0.2 280deg) 40%, transparent);
  --color-chart-1: oklch(70% 0.2 280deg);
  --color-chart-2: oklch(80% 0.18 160deg);
  --color-chart-3: oklch(from oklch(70% 0.2 280deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(70% 0.2 280deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(70% 0.2 280deg) l c calc(h + 180));
}

/* 05 Amethyst — Amatista creativa */
:root[data-palette=amethyst][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(58% 0.2 305deg);
  --accent-secondary: oklch(75% 0.15 110deg);
  --accent-hover: oklch(48% 0.22 303deg);
  --bg-base: oklch(99% 0.005 295deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.004 293deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.004 293deg);
  --border-color: color-mix(in oklch, oklch(58% 0.2 305deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(58% 0.2 305deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(58% 0.2 305deg), oklch(from oklch(58% 0.2 305deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.15 110deg), oklch(from oklch(75% 0.15 110deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(58% 0.2 305deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(58% 0.2 305deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(58% 0.2 305deg) 40%, transparent);
  --color-chart-1: oklch(58% 0.2 305deg);
  --color-chart-2: oklch(75% 0.15 110deg);
  --color-chart-3: oklch(from oklch(58% 0.2 305deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(58% 0.2 305deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(58% 0.2 305deg) l c calc(h + 180));
}

:root[data-palette=amethyst][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(72% 0.18 300deg);
  --accent-secondary: oklch(85% 0.15 110deg);
  --accent-hover: oklch(82% 0.14 298deg);
  --bg-base: oklch(10% 0.025 300deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.03 297deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.03 297deg);
  --border-color: color-mix(in oklch, oklch(72% 0.18 300deg) 14%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(72% 0.18 300deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(72% 0.18 300deg), oklch(from oklch(72% 0.18 300deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(85% 0.15 110deg), oklch(from oklch(85% 0.15 110deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(72% 0.18 300deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(72% 0.18 300deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(72% 0.18 300deg) 40%, transparent);
  --color-chart-1: oklch(72% 0.18 300deg);
  --color-chart-2: oklch(85% 0.15 110deg);
  --color-chart-3: oklch(from oklch(72% 0.18 300deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(72% 0.18 300deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(72% 0.18 300deg) l c calc(h + 180));
}

/* 06 Lavender — Lavanda elegante */
:root[data-palette=lavender][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(64% 0.14 295deg);
  --accent-secondary: oklch(85% 0.12 190deg);
  --accent-hover: oklch(54% 0.16 293deg);
  --bg-base: oklch(98% 0.007 290deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.005 288deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.005 288deg);
  --border-color: color-mix(in oklch, oklch(64% 0.14 295deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(64% 0.14 295deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(64% 0.14 295deg), oklch(from oklch(64% 0.14 295deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(85% 0.12 190deg), oklch(from oklch(85% 0.12 190deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(64% 0.14 295deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(64% 0.14 295deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(64% 0.14 295deg) 40%, transparent);
  --color-chart-1: oklch(64% 0.14 295deg);
  --color-chart-2: oklch(85% 0.12 190deg);
  --color-chart-3: oklch(from oklch(64% 0.14 295deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(64% 0.14 295deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(64% 0.14 295deg) l c calc(h + 180));
}

:root[data-palette=lavender][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(78% 0.12 290deg);
  --accent-secondary: oklch(95% 0.12 190deg);
  --accent-hover: oklch(86% 0.1 288deg);
  --bg-base: oklch(11% 0.02 295deg);
  --bg-panel: color-mix(in oklch, oklch(16% 0.025 292deg) 70%, transparent);
  --bg-panel-solid: oklch(16% 0.025 292deg);
  --border-color: color-mix(in oklch, oklch(78% 0.12 290deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(78% 0.12 290deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(78% 0.12 290deg), oklch(from oklch(78% 0.12 290deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(95% 0.12 190deg), oklch(from oklch(95% 0.12 190deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(78% 0.12 290deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(78% 0.12 290deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(78% 0.12 290deg) 40%, transparent);
  --color-chart-1: oklch(78% 0.12 290deg);
  --color-chart-2: oklch(95% 0.12 190deg);
  --color-chart-3: oklch(from oklch(78% 0.12 290deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(78% 0.12 290deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(78% 0.12 290deg) l c calc(h + 180));
}

/* 07 Plum — Ciruela oscura con autoridad */
:root[data-palette=plum][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(44% 0.17 315deg);
  --accent-secondary: oklch(70% 0.15 85deg);
  --accent-hover: oklch(34% 0.19 313deg);
  --bg-base: oklch(98% 0.004 315deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.003 313deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.003 313deg);
  --border-color: color-mix(in oklch, oklch(44% 0.17 315deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(44% 0.17 315deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(44% 0.17 315deg), oklch(from oklch(44% 0.17 315deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(70% 0.15 85deg), oklch(from oklch(70% 0.15 85deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(44% 0.17 315deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(44% 0.17 315deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(44% 0.17 315deg) 40%, transparent);
  --color-chart-1: oklch(44% 0.17 315deg);
  --color-chart-2: oklch(70% 0.15 85deg);
  --color-chart-3: oklch(from oklch(44% 0.17 315deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(44% 0.17 315deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(44% 0.17 315deg) l c calc(h + 180));
}

:root[data-palette=plum][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(65% 0.16 310deg);
  --accent-secondary: oklch(80% 0.15 85deg);
  --accent-hover: oklch(75% 0.13 308deg);
  --bg-base: oklch(9% 0.02 315deg);
  --bg-panel: color-mix(in oklch, oklch(14% 0.025 312deg) 70%, transparent);
  --bg-panel-solid: oklch(14% 0.025 312deg);
  --border-color: color-mix(in oklch, oklch(65% 0.16 310deg) 14%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(65% 0.16 310deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(65% 0.16 310deg), oklch(from oklch(65% 0.16 310deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(80% 0.15 85deg), oklch(from oklch(80% 0.15 85deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(65% 0.16 310deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(65% 0.16 310deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(65% 0.16 310deg) 40%, transparent);
  --color-chart-1: oklch(65% 0.16 310deg);
  --color-chart-2: oklch(80% 0.15 85deg);
  --color-chart-3: oklch(from oklch(65% 0.16 310deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(65% 0.16 310deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(65% 0.16 310deg) l c calc(h + 180));
}

/* 08 Jade — Jade esmeralda */
:root[data-palette=jade][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(58% 0.18 160deg);
  --accent-secondary: oklch(55% 0.2 280deg);
  --accent-hover: oklch(48% 0.2 158deg);
  --bg-base: oklch(99% 0.005 155deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.004 153deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.004 153deg);
  --border-color: color-mix(in oklch, oklch(58% 0.18 160deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(58% 0.18 160deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(58% 0.18 160deg), oklch(from oklch(58% 0.18 160deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(55% 0.2 280deg), oklch(from oklch(55% 0.2 280deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(58% 0.18 160deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(58% 0.18 160deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(58% 0.18 160deg) 40%, transparent);
  --color-chart-1: oklch(58% 0.18 160deg);
  --color-chart-2: oklch(55% 0.2 280deg);
  --color-chart-3: oklch(from oklch(58% 0.18 160deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(58% 0.18 160deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(58% 0.18 160deg) l c calc(h + 180));
}

:root[data-palette=jade][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(72% 0.16 155deg);
  --accent-secondary: oklch(65% 0.2 280deg);
  --accent-hover: oklch(82% 0.13 153deg);
  --bg-base: oklch(9% 0.025 160deg);
  --bg-panel: color-mix(in oklch, oklch(14% 0.03 157deg) 70%, transparent);
  --bg-panel-solid: oklch(14% 0.03 157deg);
  --border-color: color-mix(in oklch, oklch(72% 0.16 155deg) 14%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(72% 0.16 155deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(72% 0.16 155deg), oklch(from oklch(72% 0.16 155deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(65% 0.2 280deg), oklch(from oklch(65% 0.2 280deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(72% 0.16 155deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(72% 0.16 155deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(72% 0.16 155deg) 40%, transparent);
  --color-chart-1: oklch(72% 0.16 155deg);
  --color-chart-2: oklch(65% 0.2 280deg);
  --color-chart-3: oklch(from oklch(72% 0.16 155deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(72% 0.16 155deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(72% 0.16 155deg) l c calc(h + 180));
}

/* 09 Sage — Salvia apagada y orgánica */
:root[data-palette=sage][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(60% 0.1 155deg);
  --accent-secondary: oklch(65% 0.12 45deg);
  --accent-hover: oklch(50% 0.12 153deg);
  --bg-base: oklch(98% 0.007 150deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.005 148deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.005 148deg);
  --border-color: color-mix(in oklch, oklch(60% 0.1 155deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(60% 0.1 155deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(60% 0.1 155deg), oklch(from oklch(60% 0.1 155deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(65% 0.12 45deg), oklch(from oklch(65% 0.12 45deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(60% 0.1 155deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(60% 0.1 155deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(60% 0.1 155deg) 40%, transparent);
  --color-chart-1: oklch(60% 0.1 155deg);
  --color-chart-2: oklch(65% 0.12 45deg);
  --color-chart-3: oklch(from oklch(60% 0.1 155deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(60% 0.1 155deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(60% 0.1 155deg) l c calc(h + 180));
}

:root[data-palette=sage][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(74% 0.09 150deg);
  --accent-secondary: oklch(75% 0.12 45deg);
  --accent-hover: oklch(82% 0.07 148deg);
  --bg-base: oklch(10% 0.015 155deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.018 152deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.018 152deg);
  --border-color: color-mix(in oklch, oklch(74% 0.09 150deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(74% 0.09 150deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(74% 0.09 150deg), oklch(from oklch(74% 0.09 150deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.12 45deg), oklch(from oklch(75% 0.12 45deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(74% 0.09 150deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(74% 0.09 150deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(74% 0.09 150deg) 40%, transparent);
  --color-chart-1: oklch(74% 0.09 150deg);
  --color-chart-2: oklch(75% 0.12 45deg);
  --color-chart-3: oklch(from oklch(74% 0.09 150deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(74% 0.09 150deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(74% 0.09 150deg) l c calc(h + 180));
}

/* 10 Mint — Menta fresca y ágil */
:root[data-palette=mint][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(75% 0.13 170deg);
  --accent-secondary: oklch(70% 0.16 350deg);
  --accent-hover: oklch(65% 0.15 168deg);
  --bg-base: oklch(99% 0.005 170deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.004 168deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.004 168deg);
  --border-color: color-mix(in oklch, oklch(75% 0.13 170deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(75% 0.13 170deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(75% 0.13 170deg), oklch(from oklch(75% 0.13 170deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(70% 0.16 350deg), oklch(from oklch(70% 0.16 350deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(75% 0.13 170deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(75% 0.13 170deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(75% 0.13 170deg) 40%, transparent);
  --color-chart-1: oklch(75% 0.13 170deg);
  --color-chart-2: oklch(70% 0.16 350deg);
  --color-chart-3: oklch(from oklch(75% 0.13 170deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(75% 0.13 170deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(75% 0.13 170deg) l c calc(h + 180));
}

:root[data-palette=mint][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(85% 0.11 165deg);
  --accent-secondary: oklch(80% 0.16 350deg);
  --accent-hover: oklch(90% 0.09 163deg);
  --bg-base: oklch(9% 0.02 170deg);
  --bg-panel: color-mix(in oklch, oklch(14% 0.025 167deg) 70%, transparent);
  --bg-panel-solid: oklch(14% 0.025 167deg);
  --border-color: color-mix(in oklch, oklch(85% 0.11 165deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(85% 0.11 165deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(85% 0.11 165deg), oklch(from oklch(85% 0.11 165deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(80% 0.16 350deg), oklch(from oklch(80% 0.16 350deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(85% 0.11 165deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(85% 0.11 165deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(85% 0.11 165deg) 40%, transparent);
  --color-chart-1: oklch(85% 0.11 165deg);
  --color-chart-2: oklch(80% 0.16 350deg);
  --color-chart-3: oklch(from oklch(85% 0.11 165deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(85% 0.11 165deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(85% 0.11 165deg) l c calc(h + 180));
}

/* 11 Ember — Naranja brasa urgente */
:root[data-palette=ember][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(63% 0.19 35deg);
  --accent-secondary: oklch(65% 0.15 220deg);
  --accent-hover: oklch(53% 0.21 33deg);
  --bg-base: oklch(99% 0.008 45deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.006 43deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.006 43deg);
  --border-color: color-mix(in oklch, oklch(63% 0.19 35deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(63% 0.19 35deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(63% 0.19 35deg), oklch(from oklch(63% 0.19 35deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(65% 0.15 220deg), oklch(from oklch(65% 0.15 220deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(63% 0.19 35deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(63% 0.19 35deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(63% 0.19 35deg) 40%, transparent);
  --color-chart-1: oklch(63% 0.19 35deg);
  --color-chart-2: oklch(65% 0.15 220deg);
  --color-chart-3: oklch(from oklch(63% 0.19 35deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(63% 0.19 35deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(63% 0.19 35deg) l c calc(h + 180));
}

:root[data-palette=ember][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(75% 0.17 32deg);
  --accent-secondary: oklch(75% 0.15 220deg);
  --accent-hover: oklch(83% 0.14 30deg);
  --bg-base: oklch(10% 0.02 30deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.025 28deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.025 28deg);
  --border-color: color-mix(in oklch, oklch(75% 0.17 32deg) 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(75% 0.17 32deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(75% 0.17 32deg), oklch(from oklch(75% 0.17 32deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.15 220deg), oklch(from oklch(75% 0.15 220deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(75% 0.17 32deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(75% 0.17 32deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(75% 0.17 32deg) 40%, transparent);
  --color-chart-1: oklch(75% 0.17 32deg);
  --color-chart-2: oklch(75% 0.15 220deg);
  --color-chart-3: oklch(from oklch(75% 0.17 32deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(75% 0.17 32deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(75% 0.17 32deg) l c calc(h + 180));
}

/* 12 Gold — Oro cálido del éxito */
:root[data-palette=gold][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(70% 0.14 80deg);
  --accent-secondary: oklch(50% 0.15 260deg);
  --accent-hover: oklch(60% 0.16 78deg);
  --bg-base: oklch(99% 0.008 78deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.006 76deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.006 76deg);
  --border-color: color-mix(in oklch, oklch(70% 0.14 80deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(70% 0.14 80deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(70% 0.14 80deg), oklch(from oklch(70% 0.14 80deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(50% 0.15 260deg), oklch(from oklch(50% 0.15 260deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(70% 0.14 80deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(70% 0.14 80deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(70% 0.14 80deg) 40%, transparent);
  --color-chart-1: oklch(70% 0.14 80deg);
  --color-chart-2: oklch(50% 0.15 260deg);
  --color-chart-3: oklch(from oklch(70% 0.14 80deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(70% 0.14 80deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(70% 0.14 80deg) l c calc(h + 180));
}

:root[data-palette=gold][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(80% 0.13 78deg);
  --accent-secondary: oklch(60% 0.15 260deg);
  --accent-hover: oklch(88% 0.1 76deg);
  --bg-base: oklch(10% 0.02 70deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.025 68deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.025 68deg);
  --border-color: color-mix(in oklch, oklch(80% 0.13 78deg) 13%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(80% 0.13 78deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(80% 0.13 78deg), oklch(from oklch(80% 0.13 78deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(60% 0.15 260deg), oklch(from oklch(60% 0.15 260deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(80% 0.13 78deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(80% 0.13 78deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(80% 0.13 78deg) 40%, transparent);
  --color-chart-1: oklch(80% 0.13 78deg);
  --color-chart-2: oklch(60% 0.15 260deg);
  --color-chart-3: oklch(from oklch(80% 0.13 78deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(80% 0.13 78deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(80% 0.13 78deg) l c calc(h + 180));
}

/* 13 Coral — Coral vibrante y humano */
:root[data-palette=coral][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(65% 0.18 22deg);
  --accent-secondary: oklch(75% 0.15 180deg);
  --accent-hover: oklch(55% 0.2 20deg);
  --bg-base: oklch(99% 0.007 25deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.005 23deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.005 23deg);
  --border-color: color-mix(in oklch, oklch(65% 0.18 22deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(65% 0.18 22deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(65% 0.18 22deg), oklch(from oklch(65% 0.18 22deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.15 180deg), oklch(from oklch(75% 0.15 180deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(65% 0.18 22deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(65% 0.18 22deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(65% 0.18 22deg) 40%, transparent);
  --color-chart-1: oklch(65% 0.18 22deg);
  --color-chart-2: oklch(75% 0.15 180deg);
  --color-chart-3: oklch(from oklch(65% 0.18 22deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(65% 0.18 22deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(65% 0.18 22deg) l c calc(h + 180));
}

:root[data-palette=coral][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(76% 0.16 20deg);
  --accent-secondary: oklch(85% 0.15 180deg);
  --accent-hover: oklch(84% 0.13 18deg);
  --bg-base: oklch(10% 0.025 20deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.03 18deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.03 18deg);
  --border-color: color-mix(in oklch, oklch(76% 0.16 20deg) 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(76% 0.16 20deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(76% 0.16 20deg), oklch(from oklch(76% 0.16 20deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(85% 0.15 180deg), oklch(from oklch(85% 0.15 180deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(76% 0.16 20deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(76% 0.16 20deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(76% 0.16 20deg) 40%, transparent);
  --color-chart-1: oklch(76% 0.16 20deg);
  --color-chart-2: oklch(85% 0.15 180deg);
  --color-chart-3: oklch(from oklch(76% 0.16 20deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(76% 0.16 20deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(76% 0.16 20deg) l c calc(h + 180));
}

/* 14 Rose — Rosa polvoriento profesional */
:root[data-palette=rose][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(62% 0.16 350deg);
  --accent-secondary: oklch(60% 0.12 210deg);
  --accent-hover: oklch(52% 0.18 348deg);
  --bg-base: oklch(99% 0.006 355deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.004 353deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.004 353deg);
  --border-color: color-mix(in oklch, oklch(62% 0.16 350deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(62% 0.16 350deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(62% 0.16 350deg), oklch(from oklch(62% 0.16 350deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(60% 0.12 210deg), oklch(from oklch(60% 0.12 210deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(62% 0.16 350deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(62% 0.16 350deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(62% 0.16 350deg) 40%, transparent);
  --color-chart-1: oklch(62% 0.16 350deg);
  --color-chart-2: oklch(60% 0.12 210deg);
  --color-chart-3: oklch(from oklch(62% 0.16 350deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(62% 0.16 350deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(62% 0.16 350deg) l c calc(h + 180));
}

:root[data-palette=rose][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(75% 0.14 348deg);
  --accent-secondary: oklch(70% 0.12 210deg);
  --accent-hover: oklch(83% 0.11 346deg);
  --bg-base: oklch(10% 0.02 350deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.025 347deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.025 347deg);
  --border-color: color-mix(in oklch, oklch(75% 0.14 348deg) 14%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(75% 0.14 348deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(75% 0.14 348deg), oklch(from oklch(75% 0.14 348deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(70% 0.12 210deg), oklch(from oklch(70% 0.12 210deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(75% 0.14 348deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(75% 0.14 348deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(75% 0.14 348deg) 40%, transparent);
  --color-chart-1: oklch(75% 0.14 348deg);
  --color-chart-2: oklch(70% 0.12 210deg);
  --color-chart-3: oklch(from oklch(75% 0.14 348deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(75% 0.14 348deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(75% 0.14 348deg) l c calc(h + 180));
}

/* 15 Bronze — Bronce artesanal */
:root[data-palette=bronze][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(56% 0.1 55deg);
  --accent-secondary: oklch(65% 0.14 165deg);
  --accent-hover: oklch(46% 0.12 53deg);
  --bg-base: oklch(98% 0.008 55deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.006 53deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.006 53deg);
  --border-color: color-mix(in oklch, oklch(56% 0.1 55deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(56% 0.1 55deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(56% 0.1 55deg), oklch(from oklch(56% 0.1 55deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(65% 0.14 165deg), oklch(from oklch(65% 0.14 165deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(56% 0.1 55deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(56% 0.1 55deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(56% 0.1 55deg) 40%, transparent);
  --color-chart-1: oklch(56% 0.1 55deg);
  --color-chart-2: oklch(65% 0.14 165deg);
  --color-chart-3: oklch(from oklch(56% 0.1 55deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(56% 0.1 55deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(56% 0.1 55deg) l c calc(h + 180));
}

:root[data-palette=bronze][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(70% 0.09 52deg);
  --accent-secondary: oklch(75% 0.14 165deg);
  --accent-hover: oklch(78% 0.07 50deg);
  --bg-base: oklch(10% 0.015 50deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.018 48deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.018 48deg);
  --border-color: color-mix(in oklch, oklch(70% 0.09 52deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(70% 0.09 52deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(70% 0.09 52deg), oklch(from oklch(70% 0.09 52deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.14 165deg), oklch(from oklch(75% 0.14 165deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(70% 0.09 52deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(70% 0.09 52deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(70% 0.09 52deg) 40%, transparent);
  --color-chart-1: oklch(70% 0.09 52deg);
  --color-chart-2: oklch(75% 0.14 165deg);
  --color-chart-3: oklch(from oklch(70% 0.09 52deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(70% 0.09 52deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(70% 0.09 52deg) l c calc(h + 180));
}

/* 16 Slate — Pizarra neutral */
:root[data-palette=slate][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(50% 0.07 250deg);
  --accent-secondary: oklch(65% 0.15 35deg);
  --accent-hover: oklch(40% 0.09 248deg);
  --bg-base: oklch(98% 0.003 250deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.002 248deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.002 248deg);
  --border-color: color-mix(in oklch, oklch(50% 0.07 250deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(50% 0.07 250deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(50% 0.07 250deg), oklch(from oklch(50% 0.07 250deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(65% 0.15 35deg), oklch(from oklch(65% 0.15 35deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(50% 0.07 250deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(50% 0.07 250deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(50% 0.07 250deg) 40%, transparent);
  --color-chart-1: oklch(50% 0.07 250deg);
  --color-chart-2: oklch(65% 0.15 35deg);
  --color-chart-3: oklch(from oklch(50% 0.07 250deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(50% 0.07 250deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(50% 0.07 250deg) l c calc(h + 180));
}

:root[data-palette=slate][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(68% 0.06 248deg);
  --accent-secondary: oklch(75% 0.15 35deg);
  --accent-hover: oklch(76% 0.05 246deg);
  --bg-base: oklch(10% 0.008 250deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0.01 247deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0.01 247deg);
  --border-color: color-mix(in oklch, oklch(68% 0.06 248deg) 10%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(68% 0.06 248deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(68% 0.06 248deg), oklch(from oklch(68% 0.06 248deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.15 35deg), oklch(from oklch(75% 0.15 35deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(68% 0.06 248deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(68% 0.06 248deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(68% 0.06 248deg) 40%, transparent);
  --color-chart-1: oklch(68% 0.06 248deg);
  --color-chart-2: oklch(75% 0.15 35deg);
  --color-chart-3: oklch(from oklch(68% 0.06 248deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(68% 0.06 248deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(68% 0.06 248deg) l c calc(h + 180));
}

/* 17 Graphite — Grafito puro, cero distracción */
:root[data-palette=graphite][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(45% 0 0deg);
  --accent-secondary: oklch(60% 0.18 25deg);
  --accent-hover: oklch(35% 0 0deg);
  --bg-base: oklch(97% 0 0deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0 0deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0 0deg);
  --border-color: color-mix(in oklch, oklch(45% 0 0deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(45% 0 0deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(45% 0 0deg), oklch(from oklch(45% 0 0deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(60% 0.18 25deg), oklch(from oklch(60% 0.18 25deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(45% 0 0deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(45% 0 0deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(45% 0 0deg) 40%, transparent);
  --color-chart-1: oklch(45% 0 0deg);
  --color-chart-2: oklch(60% 0.18 25deg);
  --color-chart-3: oklch(from oklch(45% 0 0deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(45% 0 0deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(45% 0 0deg) l c calc(h + 180));
}

:root[data-palette=graphite][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(70% 0 0deg);
  --accent-secondary: oklch(70% 0.18 25deg);
  --accent-hover: oklch(78% 0 0deg);
  --bg-base: oklch(10% 0 0deg);
  --bg-panel: color-mix(in oklch, oklch(15% 0 0deg) 70%, transparent);
  --bg-panel-solid: oklch(15% 0 0deg);
  --border-color: color-mix(in oklch, oklch(70% 0 0deg) 10%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(70% 0 0deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(70% 0 0deg), oklch(from oklch(70% 0 0deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(70% 0.18 25deg), oklch(from oklch(70% 0.18 25deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(70% 0 0deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(70% 0 0deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(70% 0 0deg) 40%, transparent);
  --color-chart-1: oklch(70% 0 0deg);
  --color-chart-2: oklch(70% 0.18 25deg);
  --color-chart-3: oklch(from oklch(70% 0 0deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(70% 0 0deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(70% 0 0deg) l c calc(h + 180));
}

/* 18 Sand — Arena cálida documental */
:root[data-palette=sand][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(62% 0.08 80deg);
  --accent-secondary: oklch(60% 0.12 220deg);
  --accent-hover: oklch(52% 0.1 78deg);
  --bg-base: oklch(97% 0.01 80deg);
  --bg-panel: color-mix(in oklch, oklch(100% 0.008 78deg) 70%, transparent);
  --bg-panel-solid: oklch(100% 0.008 78deg);
  --border-color: color-mix(in oklch, oklch(62% 0.08 80deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(62% 0.08 80deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(62% 0.08 80deg), oklch(from oklch(62% 0.08 80deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(60% 0.12 220deg), oklch(from oklch(60% 0.12 220deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(62% 0.08 80deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(62% 0.08 80deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(62% 0.08 80deg) 40%, transparent);
  --color-chart-1: oklch(62% 0.08 80deg);
  --color-chart-2: oklch(60% 0.12 220deg);
  --color-chart-3: oklch(from oklch(62% 0.08 80deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(62% 0.08 80deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(62% 0.08 80deg) l c calc(h + 180));
}

:root[data-palette=sand][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: oklch(75% 0.07 78deg);
  --accent-secondary: oklch(70% 0.12 220deg);
  --accent-hover: oklch(83% 0.05 76deg);
  --bg-base: oklch(11% 0.01 75deg);
  --bg-panel: color-mix(in oklch, oklch(16% 0.012 72deg) 70%, transparent);
  --bg-panel-solid: oklch(16% 0.012 72deg);
  --border-color: color-mix(in oklch, oklch(75% 0.07 78deg) 10%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(75% 0.07 78deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(75% 0.07 78deg), oklch(from oklch(75% 0.07 78deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(70% 0.12 220deg), oklch(from oklch(70% 0.12 220deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(75% 0.07 78deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(75% 0.07 78deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(75% 0.07 78deg) 40%, transparent);
  --color-chart-1: oklch(75% 0.07 78deg);
  --color-chart-2: oklch(70% 0.12 220deg);
  --color-chart-3: oklch(from oklch(75% 0.07 78deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(75% 0.07 78deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(75% 0.07 78deg) l c calc(h + 180));
}

/* 19 Google Public (Material Design Blue) */
:root[data-palette=google-public][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: #1a73e8;
  --accent-secondary: #ea4335;
  --accent-hover: #174ea6;
  --bg-base: #ffffff;
  --bg-panel: color-mix(in oklch, #f8f9fa 70%, transparent);
  --bg-panel-solid: #f8f9fa;
  --border-color: color-mix(in oklch, #1a73e8 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from #1a73e8 calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, #1a73e8, oklch(from #1a73e8 l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, #ea4335, oklch(from #ea4335 l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, #1a73e8 40%, transparent),
    color-mix(in oklch, oklch(from #1a73e8 l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, #1a73e8 40%, transparent);
  --color-chart-1: #1a73e8;
  --color-chart-2: #ea4335;
  --color-chart-3: oklch(from #1a73e8 l c calc(h + 90));
  --color-chart-4: oklch(from #1a73e8 l c calc(h + 135));
  --color-chart-5: oklch(from #1a73e8 l c calc(h + 180));
}

:root[data-palette=google-public][data-theme=dark] {
  --accent-text: #202124;
  --accent-color: #8ab4f8;
  --accent-secondary: #f28b82;
  --accent-hover: #aecbfa;
  --bg-base: #202124;
  --bg-panel: color-mix(in oklch, #303134 70%, transparent);
  --bg-panel-solid: #303134;
  --border-color: color-mix(in oklch, #8ab4f8 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from #8ab4f8 calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, #8ab4f8, oklch(from #8ab4f8 l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, #f28b82, oklch(from #f28b82 l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, #8ab4f8 40%, transparent),
    color-mix(in oklch, oklch(from #8ab4f8 l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, #8ab4f8 40%, transparent);
  --color-chart-1: #8ab4f8;
  --color-chart-2: #f28b82;
  --color-chart-3: oklch(from #8ab4f8 l c calc(h + 90));
  --color-chart-4: oklch(from #8ab4f8 l c calc(h + 135));
  --color-chart-5: oklch(from #8ab4f8 l c calc(h + 180));
}

/* 20 Google Corporate (Material You Muted) */
:root[data-palette=google-corporate][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: oklch(65% 0.1 250deg);
  --accent-secondary: oklch(75% 0.16 85deg);
  --accent-hover: oklch(55% 0.1 250deg);
  --bg-base: #ffffff;
  --bg-panel: color-mix(in oklch, #f0f4f8 70%, transparent);
  --bg-panel-solid: #f0f4f8;
  --border-color: color-mix(in oklch, oklch(65% 0.1 250deg) 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(65% 0.1 250deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(65% 0.1 250deg), oklch(from oklch(65% 0.1 250deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(75% 0.16 85deg), oklch(from oklch(75% 0.16 85deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(65% 0.1 250deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(65% 0.1 250deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(65% 0.1 250deg) 40%, transparent);
  --color-chart-1: oklch(65% 0.1 250deg);
  --color-chart-2: oklch(75% 0.16 85deg);
  --color-chart-3: oklch(from oklch(65% 0.1 250deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(65% 0.1 250deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(65% 0.1 250deg) l c calc(h + 180));
}

:root[data-palette=google-corporate][data-theme=dark] {
  --accent-text: #0f172a;
  --accent-color: oklch(75% 0.1 250deg);
  --accent-secondary: oklch(85% 0.16 85deg);
  --accent-hover: oklch(85% 0.1 250deg);
  --bg-base: #1e293b;
  --bg-panel: color-mix(in oklch, #0f172a 70%, transparent);
  --bg-panel-solid: #0f172a;
  --border-color: color-mix(in oklch, oklch(75% 0.1 250deg) 10%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from oklch(75% 0.1 250deg) calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, oklch(75% 0.1 250deg), oklch(from oklch(75% 0.1 250deg) l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, oklch(85% 0.16 85deg), oklch(from oklch(85% 0.16 85deg) l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, oklch(75% 0.1 250deg) 40%, transparent),
    color-mix(in oklch, oklch(from oklch(75% 0.1 250deg) l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, oklch(75% 0.1 250deg) 40%, transparent);
  --color-chart-1: oklch(75% 0.1 250deg);
  --color-chart-2: oklch(85% 0.16 85deg);
  --color-chart-3: oklch(from oklch(75% 0.1 250deg) l c calc(h + 90));
  --color-chart-4: oklch(from oklch(75% 0.1 250deg) l c calc(h + 135));
  --color-chart-5: oklch(from oklch(75% 0.1 250deg) l c calc(h + 180));
}

/* 21 L3M Corporate — Orange Accent */
:root[data-palette=l3m-orange][data-theme=light] {
  --accent-text: #ffffff;
  --accent-color: #f08032;
  --accent-secondary: #f7c851;
  --accent-hover: #cc6622;
  --bg-base: #ffffff;
  --bg-panel: color-mix(in oklch, #f8f9fa 70%, transparent);
  --bg-panel-solid: #f8f9fa;
  --border-color: color-mix(in oklch, #f08032 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from #f08032 calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, #f08032, oklch(from #f08032 l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, #f7c851, oklch(from #f7c851 l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, #f08032 40%, transparent),
    color-mix(in oklch, oklch(from #f08032 l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, #f08032 40%, transparent);
  --color-chart-1: #f08032;
  --color-chart-2: #f7c851;
  --color-chart-3: oklch(from #f08032 l c calc(h + 90));
  --color-chart-4: oklch(from #f08032 l c calc(h + 135));
  --color-chart-5: oklch(from #f08032 l c calc(h + 180));
}

:root[data-palette=l3m-orange][data-theme=dark] {
  --accent-text: #ffffff;
  --accent-color: #f08032;
  --accent-secondary: #f7c851;
  --accent-hover: #cc6622;
  --bg-base: #1e293b;
  --bg-panel: color-mix(in oklch, #0f172a 70%, transparent);
  --bg-panel-solid: #0f172a;
  --border-color: color-mix(in oklch, #f08032 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from #f08032 calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, #f08032, oklch(from #f08032 l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, #f7c851, oklch(from #f7c851 l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, #f08032 40%, transparent),
    color-mix(in oklch, oklch(from #f08032 l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, #f08032 40%, transparent);
  --color-chart-1: #f08032;
  --color-chart-2: #f7c851;
  --color-chart-3: oklch(from #f08032 l c calc(h + 90));
  --color-chart-4: oklch(from #f08032 l c calc(h + 135));
  --color-chart-5: oklch(from #f08032 l c calc(h + 180));
}

/* 22 L3M Corporate — Yellow Accent */
:root[data-palette=l3m-yellow][data-theme=light] {
  --accent-text: #000000;
  --accent-color: #f7c851;
  --accent-secondary: #f08032;
  --accent-hover: #d1a943;
  --bg-base: #ffffff;
  --bg-panel: color-mix(in oklch, #f8f9fa 70%, transparent);
  --bg-panel-solid: #f8f9fa;
  --border-color: color-mix(in oklch, #f7c851 12%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from #f7c851 calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, #f7c851, oklch(from #f7c851 l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, #f08032, oklch(from #f08032 l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, #f7c851 40%, transparent),
    color-mix(in oklch, oklch(from #f7c851 l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, #f7c851 40%, transparent);
  --color-chart-1: #f7c851;
  --color-chart-2: #f08032;
  --color-chart-3: oklch(from #f7c851 l c calc(h + 90));
  --color-chart-4: oklch(from #f7c851 l c calc(h + 135));
  --color-chart-5: oklch(from #f7c851 l c calc(h + 180));
}

:root[data-palette=l3m-yellow][data-theme=dark] {
  --accent-text: #000000;
  --accent-color: #f7c851;
  --accent-secondary: #f08032;
  --accent-hover: #d1a943;
  --bg-base: #1e293b;
  --bg-panel: color-mix(in oklch, #0f172a 70%, transparent);
  --bg-panel-solid: #0f172a;
  --border-color: color-mix(in oklch, #f7c851 15%, transparent);
  --shadow-marine: 0 8px 32px 0 oklch(from #f7c851 calc(l * 0.3) c h / 0.10);
  --gradient-primary: linear-gradient(135deg, #f7c851, oklch(from #f7c851 l c calc(h + 30)));
  --gradient-secondary: linear-gradient(135deg, #f08032, oklch(from #f08032 l c calc(h + 30)));
  --gradient-glow: linear-gradient(135deg, color-mix(in oklch, #f7c851 40%, transparent),
    color-mix(in oklch, oklch(from #f7c851 l c calc(h + 30)) 40%, transparent));
  --focus-ring: 0 0 0 3px color-mix(in oklch, #f7c851 40%, transparent);
  --color-chart-1: #f7c851;
  --color-chart-2: #f08032;
  --color-chart-3: oklch(from #f7c851 l c calc(h + 90));
  --color-chart-4: oklch(from #f7c851 l c calc(h + 135));
  --color-chart-5: oklch(from #f7c851 l c calc(h + 180));
}

body {
  font-family: var(--font-data);
  background-color: var(--bg-base);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(circle at 15% 50%, var(--gradient-glow), transparent 25%), radial-gradient(circle at 85% 30%, var(--gradient-glow), transparent 25%);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin-top: 0;
  letter-spacing: -0.02em;
}

.dashboard-header {
  padding: 30px;
  text-align: center;
  position: relative;
  z-index: 10;
  animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dashboard-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 5px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.dashboard-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: 0;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 24px;
  padding: 0 30px 30px 30px;
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.panel {
  background: var(--bg-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-marine);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
}
.panel:hover::before {
  opacity: 1;
}
.panel h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 10px var(--accent-color);
}

.altar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  min-height: 60vh;
  position: relative;
}
.altar-center::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}
.altar-center #image-gen-preview {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}
.altar-center #image-gen-preview .placeholder-icon {
  font-size: 3rem;
  opacity: 0.5;
  animation: float 4s ease-in-out infinite;
}

.theme-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--bg-panel-solid);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  cursor: pointer;
  box-shadow: var(--shadow-marine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}

.action-btn {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
  transition: all 0.3s ease;
  margin-top: 15px;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
}
.action-btn:active {
  transform: translateY(1px);
}

.pulse-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.pulse-status .dot {
  width: 8px;
  height: 8px;
  background-color: #f59e0b;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.log-entry {
  font-family: var(--font-data);
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
}
.log-entry:last-child {
  border-bottom: none;
}
.log-entry .time {
  color: var(--text-muted);
  font-family: monospace;
}
.log-entry.success .msg {
  color: #10b981;
}
.log-entry.info .msg {
  color: var(--accent-color);
}
.log-entry.error .msg {
  color: #ef4444;
}
.log-entry.warning .msg {
  color: #f59e0b;
}

.theme-toggle svg {
  transition: transform 0.5s ease;
}

[data-theme=dark] .theme-toggle svg {
  transform: rotate(360deg);
}

/* Micro-animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}
/* Staggered animation for layout columns */
.dashboard-layout > * {
  animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.dashboard-layout > *:nth-child(1) {
  animation-delay: 0.1s;
}

.dashboard-layout > *:nth-child(2) {
  animation-delay: 0.2s;
}

.dashboard-layout > *:nth-child(3) {
  animation-delay: 0.3s;
}

.dashboard-layout > *:nth-child(4) {
  animation-delay: 0.4s;
}

.gem-configurator {
  grid-column: 1/-1;
  margin-top: 8px;
}

.gem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.gem-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.gem-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.gem-card h3 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gem-card h3::before {
  content: "◈";
  color: var(--accent-color);
  font-size: 0.9em;
}
.gem-card label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gem-input, .gem-textarea {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-data);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.gem-input::placeholder, .gem-textarea::placeholder {
  color: rgba(150, 150, 150, 0.3);
}
.gem-input:focus, .gem-textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: var(--bg-panel);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.gem-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

.config-actions {
  text-align: right;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

.wf-navbar {
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
}
.wf-navbar .navbar-brand {
  color: var(--text-primary) !important;
  font-weight: bold;
}
.wf-navbar .nav-link {
  color: var(--text-muted) !important;
}
.wf-navbar .nav-link:hover, .wf-navbar .nav-link.active {
  color: var(--text-primary) !important;
}
.wf-navbar .navbar-toggler {
  border-color: var(--border-color);
}

/* ==========================================
   Table Styles
   ========================================== */
.table-theme {
  color: var(--text-primary);
  border-collapse: separate;
  border-spacing: 0;
}
.table-theme thead th {
  background-color: color-mix(in oklch, var(--bg-panel) 90%, var(--border-color));
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color);
  padding: 12px 16px;
}
.table-theme thead th i {
  font-size: 0.8rem;
}
.table-theme tbody tr {
  transition: background-color var(--transition-speed) ease;
}
.table-theme tbody tr:hover {
  background-color: color-mix(in oklch, var(--accent-color) 5%, transparent);
}
.table-theme tbody td, .table-theme tbody th {
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 16px;
  vertical-align: middle;
}
.table-theme.table-striped tbody tr:nth-of-type(odd) > * {
  background-color: color-mix(in oklch, var(--bg-panel) 98%, var(--border-color));
}

/* SVG Sparklines */
.sparkline-area {
  fill: var(--accent-color);
  opacity: 0.15;
}

.sparkline-line {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Action Cards (Clickable/Hoverable Areas) */
.action-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg, 12px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--text-primary) 8%, transparent);
  border-color: color-mix(in oklch, var(--accent-color) 40%, var(--border-color));
}

:root {
  --color-primary: var(--accent-color, oklch(0.5 0.1 250));
  --color-secondary: var(--accent-secondary, oklch(0.6 0.05 250));
  --color-success: oklch(0.6 0.15 140);
  --color-danger: oklch(0.55 0.18 20);
  --color-warning: oklch(0.75 0.15 80);
  --color-info: oklch(0.65 0.15 200);
  --color-light: oklch(0.95 0.01 250);
  --color-dark: oklch(0.2 0.02 250);
  --text-on-success: #ffffff;
  --text-on-danger: #ffffff;
  --text-on-warning: #0f172a;
  --text-on-info: #ffffff;
  --text-on-primary: var(--accent-text, #ffffff);
  --text-on-secondary: var(--accent-text, #ffffff);
  --text-on-light: #0f172a;
  --text-on-dark: #ffffff;
}

:root[data-theme=dark] {
  --color-primary: var(--accent-color, oklch(0.7 0.1 250));
  --color-secondary: var(--accent-secondary, oklch(0.4 0.05 250));
  --color-success: oklch(0.5 0.15 140);
  --color-danger: oklch(0.5 0.18 25);
  --color-warning: oklch(0.65 0.15 70);
  --color-info: oklch(0.55 0.12 210);
  --color-light: oklch(0.25 0.01 250);
  --color-dark: oklch(0.1 0.02 250);
  --text-on-warning: #ffffff;
  --text-on-light: #ffffff;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
  color: var(--text-on-secondary) !important;
}

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

.bg-success {
  background-color: var(--color-success) !important;
  color: var(--text-on-success) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
  color: var(--text-on-danger) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

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

.text-warning {
  color: var(--color-warning) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
  color: var(--text-on-info) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.bg-light {
  background-color: var(--color-light) !important;
  color: var(--text-on-light) !important;
}

.text-light {
  color: var(--color-light) !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
  color: var(--text-on-dark) !important;
}

.text-dark {
  color: var(--color-dark) !important;
}

.btn {
  --bs-btn-color: inherit;
  --bs-btn-bg: inherit;
  --bs-btn-border-color: inherit;
  --bs-btn-hover-color: inherit;
  --bs-btn-hover-bg: inherit;
  --bs-btn-hover-border-color: inherit;
  --bs-btn-focus-shadow-rgb: inherit;
  --bs-btn-active-color: inherit;
  --bs-btn-active-bg: inherit;
  --bs-btn-active-border-color: inherit;
  --bs-btn-active-shadow: inherit;
  --bs-btn-disabled-color: inherit;
  --bs-btn-disabled-bg: inherit;
  --bs-btn-disabled-border-color: inherit;
  transition: all 0.3s ease;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
  background-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--accent-text, #ffffff) !important;
  -webkit-text-fill-color: var(--accent-text, #ffffff) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text, #ffffff) !important;
  box-shadow: var(--focus-ring) !important;
}

.btn-secondary {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--text-on-secondary) !important;
  -webkit-text-fill-color: var(--text-on-secondary) !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: color-mix(in oklch, var(--color-secondary) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-secondary) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 40%, transparent) !important;
}

.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--text-on-success) !important;
  -webkit-text-fill-color: var(--text-on-success) !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: color-mix(in oklch, var(--color-success) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-success) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 40%, transparent) !important;
}

.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--text-on-danger) !important;
  -webkit-text-fill-color: var(--text-on-danger) !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: color-mix(in oklch, var(--color-danger) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-danger) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 40%, transparent) !important;
}

.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: var(--text-on-warning) !important;
  -webkit-text-fill-color: var(--text-on-warning) !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: color-mix(in oklch, var(--color-warning) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-warning) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 40%, transparent) !important;
}

.btn-info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: var(--text-on-info) !important;
  -webkit-text-fill-color: var(--text-on-info) !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: color-mix(in oklch, var(--color-info) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-info) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 40%, transparent) !important;
}

.btn-light {
  background-color: var(--color-light) !important;
  border-color: var(--color-light) !important;
  color: var(--text-on-light) !important;
  -webkit-text-fill-color: var(--text-on-light) !important;
}
.btn-light:hover, .btn-light:focus, .btn-light:active {
  background-color: color-mix(in oklch, var(--color-light) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-light) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-light) 40%, transparent) !important;
}

.btn-dark {
  background-color: var(--color-dark) !important;
  border-color: var(--color-dark) !important;
  color: var(--text-on-dark) !important;
  -webkit-text-fill-color: var(--text-on-dark) !important;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  background-color: color-mix(in oklch, var(--color-dark) 85%, black) !important;
  border-color: color-mix(in oklch, var(--color-dark) 85%, black) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-dark) 40%, transparent) !important;
}

.btn-link {
  color: var(--accent-color) !important;
  text-decoration: none;
}
.btn-link:hover, .btn-link:focus {
  color: var(--accent-hover) !important;
  text-decoration: underline;
}

.wf-card p.text-muted, p.text-muted {
  color: color-mix(in oklch, var(--text-primary) 75%, var(--bg-panel-solid)) !important;
  opacity: 1 !important;
}

.table {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.table th, .table td {
  border-color: var(--border-color) !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.form-control, .form-select {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-color) !important;
  box-shadow: var(--focus-ring) !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled, .form-select[readonly] {
  background-color: color-mix(in oklch, var(--bg-base) 90%, black) !important;
  opacity: 0.7;
}

[data-style=google-style] .form-control, [data-style=google-style] .form-select, [data-style=google-style] .input-group-text, [data-style=google-style] .input-group .btn,
[data-style=google-public] .form-control, [data-style=google-public] .form-select, [data-style=google-public] .input-group-text, [data-style=google-public] .input-group .btn,
[data-style=google-corporate] .form-control, [data-style=google-corporate] .form-select, [data-style=google-corporate] .input-group-text, [data-style=google-corporate] .input-group .btn {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 4px 4px 0 0 !important;
  background-color: color-mix(in oklch, var(--bg-panel) 60%, var(--bg-base)) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
[data-style=google-style] .form-control:focus, [data-style=google-style] .form-select:focus, [data-style=google-style] .input-group-text:focus, [data-style=google-style] .input-group .btn:focus,
[data-style=google-public] .form-control:focus, [data-style=google-public] .form-select:focus, [data-style=google-public] .input-group-text:focus, [data-style=google-public] .input-group .btn:focus,
[data-style=google-corporate] .form-control:focus, [data-style=google-corporate] .form-select:focus, [data-style=google-corporate] .input-group-text:focus, [data-style=google-corporate] .input-group .btn:focus {
  border-bottom: 2px solid var(--accent-color) !important;
  box-shadow: none !important;
  background-color: var(--bg-panel) !important;
}

.form-control-plaintext {
  color: var(--text-primary) !important;
}

.input-group-text {
  background-color: var(--bg-panel) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .input-group-text:focus,
.input-group > .btn:focus {
  z-index: 5;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.form-check-input {
  background-color: var(--bg-base);
  border-color: var(--border-color);
}
.form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: var(--focus-ring);
}
.form-check-input:checked {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}
.form-check-input:disabled {
  opacity: 0.5;
}

.form-switch .form-check-input:focus {
  background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='var(--accent-color)'/></svg>"));
}
.form-switch .form-check-input:checked {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.form-range::-webkit-slider-thumb {
  background-color: var(--accent-color) !important;
}
.form-range::-webkit-slider-thumb:active {
  background-color: var(--accent-hover) !important;
}
.form-range::-moz-range-thumb {
  background-color: var(--accent-color) !important;
}
.form-range::-moz-range-thumb:active {
  background-color: var(--accent-hover) !important;
}

.is-valid {
  border-color: var(--color-success) !important;
}
.is-valid:focus {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 40%, transparent) !important;
}

.valid-feedback {
  color: var(--color-success) !important;
}

.is-invalid {
  border-color: var(--color-danger) !important;
}
.is-invalid:focus {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 40%, transparent) !important;
}

.invalid-feedback {
  color: var(--color-danger) !important;
}

.card {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.card .card-header, .card .card-footer {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}

.alert {
  border-radius: var(--border-radius-base);
  border: 1px solid transparent;
}

.alert-primary {
  --bs-alert-bg: color-mix(in oklch, var(--accent-color) 15%, var(--bg-panel)) !important;
  --bs-alert-color: var(--accent-color) !important;
  --bs-alert-border-color: color-mix(in oklch, var(--accent-color) 30%, var(--bg-panel)) !important;
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}
.alert-primary .alert-link {
  color: color-mix(in oklch, var(--accent-color) 80%, black) !important;
}

.alert-secondary {
  --bs-alert-bg: color-mix(in oklch, var(--text-muted) 15%, var(--bg-panel)) !important;
  --bs-alert-color: var(--text-primary) !important;
  --bs-alert-border-color: color-mix(in oklch, var(--border-color) 30%, var(--bg-panel)) !important;
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}
.alert-secondary .alert-link {
  color: color-mix(in oklch, var(--text-primary) 80%, black) !important;
}

.alert-success {
  --bs-alert-bg: color-mix(in oklch, oklch(65% 0.18 140deg) 15%, var(--bg-panel)) !important;
  --bs-alert-color: oklch(65% 0.18 140deg) !important;
  --bs-alert-border-color: color-mix(in oklch, oklch(65% 0.18 140deg) 30%, var(--bg-panel)) !important;
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}
.alert-success .alert-link {
  color: color-mix(in oklch, oklch(65% 0.18 140deg) 80%, black) !important;
}

.alert-danger {
  --bs-alert-bg: color-mix(in oklch, oklch(60% 0.18 25deg) 15%, var(--bg-panel)) !important;
  --bs-alert-color: oklch(60% 0.18 25deg) !important;
  --bs-alert-border-color: color-mix(in oklch, oklch(60% 0.18 25deg) 30%, var(--bg-panel)) !important;
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}
.alert-danger .alert-link {
  color: color-mix(in oklch, oklch(60% 0.18 25deg) 80%, black) !important;
}

.alert-warning {
  --bs-alert-bg: color-mix(in oklch, oklch(75% 0.15 80deg) 15%, var(--bg-panel)) !important;
  --bs-alert-color: oklch(75% 0.15 80deg) !important;
  --bs-alert-border-color: color-mix(in oklch, oklch(75% 0.15 80deg) 30%, var(--bg-panel)) !important;
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}
.alert-warning .alert-link {
  color: color-mix(in oklch, oklch(75% 0.15 80deg) 80%, black) !important;
}

.alert-info {
  --bs-alert-bg: color-mix(in oklch, oklch(72% 0.15 210deg) 15%, var(--bg-panel)) !important;
  --bs-alert-color: oklch(72% 0.15 210deg) !important;
  --bs-alert-border-color: color-mix(in oklch, oklch(72% 0.15 210deg) 30%, var(--bg-panel)) !important;
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-alert-border-color) !important;
}
.alert-info .alert-link {
  color: color-mix(in oklch, oklch(72% 0.15 210deg) 80%, black) !important;
}

.progress {
  background-color: color-mix(in oklch, var(--border-color) 40%, transparent);
  border-radius: var(--border-radius-base);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.progress-bar {
  background-color: var(--accent-color);
  transition: width 0.6s ease;
}

.progress-bar.bg-success {
  background-color: oklch(65% 0.18 140deg) !important;
}

.progress-bar.bg-warning {
  background-color: oklch(75% 0.15 80deg) !important;
}

.progress-bar.bg-danger {
  background-color: oklch(60% 0.18 25deg) !important;
}

.nav-tabs {
  border-bottom: 1px solid var(--border-color);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar {
  display: none;
}
.nav-tabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nav-tabs .nav-link {
  color: var(--text-muted);
  border: 1px solid transparent;
  border-top-left-radius: var(--border-radius-base);
  border-top-right-radius: var(--border-radius-base);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: transparent transparent var(--border-color) transparent;
  color: var(--text-primary);
}
.nav-tabs .nav-link.active {
  color: var(--accent-color);
  background-color: var(--bg-panel);
  border-color: var(--border-color) var(--border-color) var(--bg-panel);
  font-weight: 600;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
}
.breadcrumb .breadcrumb-item a {
  color: var(--accent-color);
  text-decoration: none;
}
.breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--text-muted);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
  content: "/";
}

.placeholder {
  background-color: var(--border-color);
  border-radius: 4px;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
}
.avatar.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}
.avatar.avatar-md {
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
}
.avatar.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}
.avatar.bg-primary {
  background-color: var(--accent-color) !important;
}
.avatar.bg-success {
  background-color: oklch(65% 0.18 140deg) !important;
}
.avatar.bg-warning {
  background-color: oklch(75% 0.15 80deg) !important;
  color: #000;
}
.avatar.bg-danger {
  background-color: oklch(60% 0.18 25deg) !important;
}
.avatar.bg-info {
  background-color: oklch(72% 0.15 210deg) !important;
}

.avatar-group {
  display: flex;
}
.avatar-group .avatar {
  border: 2px solid var(--bg-app);
  margin-left: -12px;
  transition: transform 0.2s ease;
}
.avatar-group .avatar:hover {
  transform: translateY(-4px);
  z-index: 10;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}

.modal-content, .offcanvas {
  background-color: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-base);
}

.modal-header, .offcanvas-header {
  border-bottom: 1px solid var(--border-color);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
}

.btn-close {
  filter: invert(0) grayscale(100%) brightness(200%);
}
[data-theme=light] .btn-close {
  filter: none;
}

.tooltip-inner {
  background-color: var(--text-primary);
  color: var(--bg-panel);
  border-radius: 4px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--text-primary);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--text-primary);
}

.bs-tooltip-auto[data-popper-placement^=start] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--text-primary);
}

.bs-tooltip-auto[data-popper-placement^=end] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--text-primary);
}

.steps-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.steps-indicator::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--border-color);
  z-index: 0;
  transform: translateY(-50%);
}
.steps-indicator .step-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}
.steps-indicator .step-item .step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg-base);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
}
.steps-indicator .step-item .step-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}
.steps-indicator .step-item.active .step-number {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: #fff;
  box-shadow: var(--accent-glow);
}
.steps-indicator .step-item.active .step-label {
  color: var(--text-primary);
}
.steps-indicator .step-item.completed .step-number {
  border-color: var(--accent-color);
  background-color: color-mix(in oklch, var(--accent-color) 20%, transparent);
  color: var(--accent-color);
}
.steps-indicator .step-item.completed .step-label {
  color: var(--text-primary);
}

/* --- EXACT CONTRAST FIXES --- */
html[data-style=aether-minimal][data-palette=sapphire][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=arctic][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=amethyst][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=lavender][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=plum][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=jade][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=sage][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=mint][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=ember][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=gold][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=coral][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=rose][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=bronze][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aether-minimal][data-palette=slate][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aether-minimal][data-palette=graphite][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=sand][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=sapphire][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=arctic][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=teal][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=indigo][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aether-minimal][data-palette=amethyst][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aether-minimal][data-palette=lavender][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aether-minimal][data-palette=plum][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=jade][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=sage][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=mint][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=arctic][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=teal][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=indigo][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=plum][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=ember][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=gold][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=coral][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=rose][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=slate][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=graphite][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=sand][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=sapphire][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=arctic][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=teal][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=indigo][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=amethyst][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=lavender][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=plum][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=jade][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=indigo][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=amethyst][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=lavender][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=plum][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=jade][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=sage][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=mint][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=ember][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=gold][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=coral][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=rose][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=bronze][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=slate][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=graphite][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=sand][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=sapphire][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=teal][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=indigo][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=amethyst][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=lavender][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=plum][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=jade][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=sage][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=mint][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=teal][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=indigo][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=amethyst][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=lavender][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=plum][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=jade][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=sage][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=mint][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=ember][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=gold][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=coral][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=rose][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=bronze][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=slate][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=graphite][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=sand][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=sapphire][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=teal][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=indigo][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=amethyst][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=lavender][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=plum][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=jade][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=sage][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=mint][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=ember][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=gold][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=cosmos-ignite][data-palette=coral][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=arctic][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=teal][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=indigo][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=plum][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=jade][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=sage][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=mint][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=ember][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=gold][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=slate][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=graphite][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=sand][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=sapphire][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=arctic][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=arctic][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=teal][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=indigo][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=lexia-chronicle][data-palette=amethyst][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=lavender][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=plum][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=mint][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=lexia-chronicle][data-palette=ember][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=lexia-chronicle][data-palette=gold][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=lexia-chronicle][data-palette=coral][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=rose][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=bronze][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=lexia-chronicle][data-palette=slate][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=graphite][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=sand][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=sapphire][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=teal][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=indigo][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=amethyst][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=lavender][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=plum][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=jade][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=teal][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aether-minimal][data-palette=indigo][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=amethyst][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=lavender][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=jade][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=sage][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=mint][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=arctic][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=teal][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=chronos-aura][data-palette=arctic][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=arctic][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=sapphire][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=amethyst][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=lavender][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=indigo][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=arctic][data-theme=dark] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=bronze][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=cosmos-ignite][data-palette=arctic][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=coral][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=neon-rebel][data-palette=rose][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=bronze][data-theme=light] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=teal][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=lexia-chronicle][data-palette=jade][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=lexia-chronicle][data-palette=sage][data-theme=light] .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-style=aegis-executive][data-palette=sage][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=aegis-executive][data-palette=mint][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=chronos-aura][data-palette=ember][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-style=neon-rebel][data-palette=amethyst][data-theme=dark] .btn-primary {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/*# sourceMappingURL=themes-catalog.css.map */