/**
 * Hub color palettes (rose / violet / blue) × light / dark / auto.
 * Contrast targets: body text & UI labels ≥ 4.5:1 on --bg; links & accents tuned per mode.
 */

/* ---- Rose — dark ---- */
html[data-palette="rose"][data-theme="dark"] {
  --bg: #100b0e;
  --bg-elevated: #1a1217;
  --bg-card: #22181e;
  --bg-diagram: #140e12;
  --text: #fef6f9;
  --text-muted: #d4c4cc;
  --text-faint: #a896a0;
  --border: #3d2d36;
  --accent: #f472b6;
  --accent-dim: #f9a8d4;
  --accent-glow: rgba(244, 114, 182, 0.16);
  --success: #4ade80;
  --warn: #fbbf24;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --link: #f472b6;
  --link-hover: #fbcfe8;
  --nav-link: var(--text-muted);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--accent);
  --on-accent: #1a050f;
}

/* ---- Rose — light ---- */
html[data-palette="rose"][data-theme="light"] {
  --bg: #fff9fb;
  --bg-elevated: #fff1f5;
  --bg-card: #fde8f0;
  --bg-diagram: #fdf4f7;
  --text: #1a1016;
  --text-muted: #5c4452;
  --text-faint: #6d5a63;
  --border: #e8d0dc;
  --accent: #9d174d;
  --accent-dim: #831843;
  --accent-glow: rgba(157, 23, 77, 0.12);
  --success: #047857;
  --warn: #b45309;
  --shadow: 0 4px 24px rgba(26, 16, 22, 0.07);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --link: #9f1239;
  --link-hover: #831843;
  --nav-link: var(--text-muted);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--accent);
  --on-accent: #ffffff;
}

/* ---- Violet — dark ---- */
html[data-palette="violet"][data-theme="dark"] {
  --bg: #0f0b18;
  --bg-elevated: #161022;
  --bg-card: #1e1630;
  --bg-diagram: #120e1c;
  --text: #f3effc;
  --text-muted: #cbc0e4;
  --text-faint: #9d91b8;
  --border: #352d4d;
  --accent: #c4b5fd;
  --accent-dim: #ddd6fe;
  --accent-glow: rgba(196, 181, 253, 0.14);
  --success: #4ade80;
  --warn: #fcd34d;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --link: #c4b5fd;
  --link-hover: #e9d5ff;
  --nav-link: var(--text-muted);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--accent);
  --on-accent: #1e1039;
}

/* ---- Violet — light ---- */
html[data-palette="violet"][data-theme="light"] {
  --bg: #faf8ff;
  --bg-elevated: #f3efff;
  --bg-card: #ebe4ff;
  --bg-diagram: #f5f0ff;
  --text: #161222;
  --text-muted: #4c4468;
  --text-faint: #5c5470;
  --border: #d4c9f0;
  --accent: #5b21b6;
  --accent-dim: #4c1d95;
  --accent-glow: rgba(91, 33, 182, 0.12);
  --success: #047857;
  --warn: #b45309;
  --shadow: 0 4px 24px rgba(22, 18, 34, 0.07);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --link: #5b21b6;
  --link-hover: #4c1d95;
  --nav-link: var(--text-muted);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--accent);
  --on-accent: #ffffff;
}

/* ---- Blue — dark ---- */
html[data-palette="blue"][data-theme="dark"] {
  --bg: #0c1018;
  --bg-elevated: #121a26;
  --bg-card: #182230;
  --bg-diagram: #0a0f16;
  --text: #eff6ff;
  --text-muted: #b8c9dc;
  --text-faint: #8fa3b8;
  --border: #2a3d52;
  --accent: #38bdf8;
  --accent-dim: #7dd3fc;
  --accent-glow: rgba(56, 189, 248, 0.14);
  --success: #4ade80;
  --warn: #fcd34d;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --link: #38bdf8;
  --link-hover: #7dd3fc;
  --nav-link: var(--text-muted);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--accent);
  --on-accent: #0c1929;
}

/* ---- Blue — light ---- */
html[data-palette="blue"][data-theme="light"] {
  --bg: #f6fafc;
  --bg-elevated: #eff6ff;
  --bg-card: #e0f0ff;
  --bg-diagram: #f0f8ff;
  --text: #0f172a;
  --text-muted: #334155;
  --text-faint: #475569;
  --border: #c9dbe8;
  --accent: #0369a1;
  --accent-dim: #0c4a6e;
  --accent-glow: rgba(3, 105, 161, 0.12);
  --success: #047857;
  --warn: #b45309;
  --shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --link: #075985;
  --link-hover: #0c4a6e;
  --nav-link: var(--text-muted);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--accent);
  --on-accent: #ffffff;
}

/* ---- Auto: follow system per palette ---- */
@media (prefers-color-scheme: light) {
  html[data-palette="rose"][data-theme="auto"] {
    --bg: #fff9fb;
    --bg-elevated: #fff1f5;
    --bg-card: #fde8f0;
    --bg-diagram: #fdf4f7;
    --text: #1a1016;
    --text-muted: #5c4452;
    --text-faint: #6d5a63;
    --border: #e8d0dc;
    --accent: #9d174d;
    --accent-dim: #831843;
    --accent-glow: rgba(157, 23, 77, 0.12);
    --success: #047857;
    --warn: #b45309;
    --shadow: 0 4px 24px rgba(26, 16, 22, 0.07);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --link: #9f1239;
    --link-hover: #831843;
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --nav-link-active: var(--accent);
    --on-accent: #ffffff;
  }
  html[data-palette="violet"][data-theme="auto"] {
    --bg: #faf8ff;
    --bg-elevated: #f3efff;
    --bg-card: #ebe4ff;
    --bg-diagram: #f5f0ff;
    --text: #161222;
    --text-muted: #4c4468;
    --text-faint: #5c5470;
    --border: #d4c9f0;
    --accent: #5b21b6;
    --accent-dim: #4c1d95;
    --accent-glow: rgba(91, 33, 182, 0.12);
    --success: #047857;
    --warn: #b45309;
    --shadow: 0 4px 24px rgba(22, 18, 34, 0.07);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --link: #5b21b6;
    --link-hover: #4c1d95;
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --nav-link-active: var(--accent);
    --on-accent: #ffffff;
  }
  html[data-palette="blue"][data-theme="auto"] {
    --bg: #f6fafc;
    --bg-elevated: #eff6ff;
    --bg-card: #e0f0ff;
    --bg-diagram: #f0f8ff;
    --text: #0f172a;
    --text-muted: #334155;
    --text-faint: #475569;
    --border: #c9dbe8;
    --accent: #0369a1;
    --accent-dim: #0c4a6e;
    --accent-glow: rgba(3, 105, 161, 0.12);
    --success: #047857;
    --warn: #b45309;
    --shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --link: #075985;
    --link-hover: #0c4a6e;
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --nav-link-active: var(--accent);
    --on-accent: #ffffff;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-palette="rose"][data-theme="auto"] {
    --bg: #100b0e;
    --bg-elevated: #1a1217;
    --bg-card: #22181e;
    --bg-diagram: #140e12;
    --text: #fef6f9;
    --text-muted: #d4c4cc;
    --text-faint: #a896a0;
    --border: #3d2d36;
    --accent: #f472b6;
    --accent-dim: #f9a8d4;
    --accent-glow: rgba(244, 114, 182, 0.16);
    --success: #4ade80;
    --warn: #fbbf24;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --link: #f472b6;
    --link-hover: #fbcfe8;
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --nav-link-active: var(--accent);
    --on-accent: #1a050f;
  }
  html[data-palette="violet"][data-theme="auto"] {
    --bg: #0f0b18;
    --bg-elevated: #161022;
    --bg-card: #1e1630;
    --bg-diagram: #120e1c;
    --text: #f3effc;
    --text-muted: #cbc0e4;
    --text-faint: #9d91b8;
    --border: #352d4d;
    --accent: #c4b5fd;
    --accent-dim: #ddd6fe;
    --accent-glow: rgba(196, 181, 253, 0.14);
    --success: #4ade80;
    --warn: #fcd34d;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --link: #c4b5fd;
    --link-hover: #e9d5ff;
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --nav-link-active: var(--accent);
    --on-accent: #1e1039;
  }
  html[data-palette="blue"][data-theme="auto"] {
    --bg: #0c1018;
    --bg-elevated: #121a26;
    --bg-card: #182230;
    --bg-diagram: #0a0f16;
    --text: #eff6ff;
    --text-muted: #b8c9dc;
    --text-faint: #8fa3b8;
    --border: #2a3d52;
    --accent: #38bdf8;
    --accent-dim: #7dd3fc;
    --accent-glow: rgba(56, 189, 248, 0.14);
    --success: #4ade80;
    --warn: #fcd34d;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --link: #38bdf8;
    --link-hover: #7dd3fc;
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --nav-link-active: var(--accent);
    --on-accent: #0c1929;
  }
}