/* themes.css — HidrogenONE theme palette overrides.
   Pairs with aurora-glass.css (the default).

   How it works:
   - aurora-glass.css defines all tokens in :root. When data-theme is unset,
     "aurora", or "dashboard" (legacy production value), Aurora look applies
     naturally via CSS cascade — this file adds nothing.
   - For each non-aurora theme we override the tokens consumed by aurora-glass.css
     (accents, glass fill/stroke, text, states) scoped under html[data-theme="<slug>"]
     and layer a backdrop via body::before / body::after pseudo-elements.
   - User choice persists in localStorage under "hidrogenone.theme".

   Themes:
     1. aurora     (default, no block here)
     2. sunset     — plum void, warm rose/amber/magenta bloom
     3. deepspace  — indigo void, twinkling starfield, planetary orbs
     4. arctic     — polar white LIGHT MODE, ice-turquoise halos, navy text
     5. cyberbloom — dark slate, magenta/lemon/lime neon blobs
     6. ocean      — abyss-teal, drifting tide blobs, faint wave overlay
*/

/* ============================================================
   THEME FONTS (loaded once, used only by specific themes)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ============================================================
   PER-THEME DEEP COMPONENT CSS — layout, hero, KPI, buttons, feed, badges.
   Token blocks below handle palette + backdrop; these @imports handle look.
   ============================================================ */
@import url('themes/aurora.css');
@import url('themes/sunset.css');
@import url('themes/deepspace.css');
@import url('themes/arctic.css');
@import url('themes/cyberbloom.css');
@import url('themes/ocean.css');

/* ============================================================
   UNIVERSAL — aurora-topbar__right hosts legacy .header-right children
   (search-trigger + header-btn + user-menu), promoted at boot via JS.
   Style them to fit the glass topbar aesthetic across all themes.
   ============================================================ */
.aurora-topbar__right { display: flex; align-items: center; gap: 12px; }
.aurora-topbar__right .search-trigger {
  height: 36px; padding: 0 12px 0 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-stroke, rgba(255,255,255,0.15));
  border-radius: 10px;
  color: var(--text-secondary, rgba(255,255,255,0.75));
  font-size: 13px; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; transition: background 160ms ease, border-color 160ms ease;
}
.aurora-topbar__right .search-trigger:hover { background: rgba(255,255,255,0.10); border-color: var(--glass-stroke-strong, rgba(255,255,255,0.22)); }
.aurora-topbar__right .search-trigger kbd {
  font: 10px/1 var(--font-mono, ui-monospace, monospace);
  padding: 3px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  margin-left: 4px;
}
.aurora-topbar__right .header-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-stroke, rgba(255,255,255,0.15));
  color: var(--text-secondary, rgba(255,255,255,0.75));
  cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms ease;
}
.aurora-topbar__right .header-btn:hover { background: rgba(255,255,255,0.10); }
.aurora-topbar__right .header-btn .notification-dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--state-danger, #ff6b8a); display: none;
}
.aurora-topbar__right .header-btn .notification-dot.active { display: block; }
.aurora-topbar__right .user-menu {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-stroke, rgba(255,255,255,0.15));
  cursor: pointer; transition: background 160ms ease;
}
.aurora-topbar__right .user-menu:hover { background: rgba(255,255,255,0.10); }
.aurora-topbar__right .user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora-pink, #ff7eb3), var(--aurora-purple, #b388ff));
  color: var(--text-primary, #fff); font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aurora-topbar__right .user-info { display: flex; flex-direction: column; line-height: 1.1; }
.aurora-topbar__right .user-name { font-size: 12px; font-weight: 600; color: var(--text-primary, #fff); }
.aurora-topbar__right .user-role { font-size: 10px; color: var(--text-tertiary, rgba(255,255,255,0.55)); letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 900px) {
  .aurora-topbar__right .search-trigger span,
  .aurora-topbar__right .search-trigger kbd,
  .aurora-topbar__right .user-info { display: none; }
}

/* ============================================================
   UNIVERSAL BRAND LOGO — applies to all themes
   Replaces the old .aurora-brand__dot gradient square with the firm's SVG logo.
   ============================================================ */
.aurora-brand { gap: var(--space-3); }
.aurora-brand__logo {
  width: 30px; height: 30px; border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.aurora-brand__name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ============================================================
   1. SUNSET — warm plum void with drifting sunset blooms
   ============================================================ */
html[data-theme="sunset"] {
  --bg-base: #1a0a1f;

  --aurora-pink: #fb7185;   /* rose */
  --aurora-cyan: #fbbf24;   /* amber (replaces cyan slot) */
  --aurora-purple: #e879f9; /* magenta */

  --glass-fill: linear-gradient(135deg, rgba(255,245,237,0.10), rgba(255,245,237,0.02));
  --glass-fill-strong: linear-gradient(135deg, rgba(255,245,237,0.16), rgba(255,245,237,0.04));
  --glass-stroke: rgba(255,245,237,0.14);
  --glass-stroke-strong: rgba(255,245,237,0.24);
  --glass-inner-highlight: inset 0 1px 0 rgba(255,245,237,0.18);
  --glass-shadow-soft: 0 8px 26px rgba(10,4,15,0.35);
  --glass-shadow: 0 18px 48px rgba(10,4,15,0.5);

  --text-primary: #fff5ed;
  --text-secondary: rgba(255,245,237,0.75);
  --text-tertiary: rgba(255,245,237,0.52);
  --text-quaternary: rgba(255,245,237,0.32);

  --state-success: #fcd34d;
  --state-warning: #fbbf24;
  --state-danger: #fda4af;
  --state-info: #f0abfc;

  --accent-active: linear-gradient(135deg, rgba(251,113,133,0.30), rgba(232,121,249,0.18));
  --accent-glow: 0 0 18px rgba(251,113,133,0.40);
}

html[data-theme="sunset"] .aurora-shell {
  background:
    radial-gradient(circle at 10% 10%, rgba(251,113,133,0.30) 0%, transparent 24%),
    radial-gradient(circle at 90% 20%, rgba(251,191,36,0.26) 0%, transparent 26%),
    radial-gradient(circle at 55% 100%, rgba(232,121,249,0.28) 0%, transparent 28%),
    var(--bg-base);
}

html[data-theme="sunset"] body::before {
  content: '';
  position: fixed; inset: -15%; z-index: -2; pointer-events: none;
  filter: blur(90px) saturate(135%);
  background:
    radial-gradient(circle at 15% 20%, rgba(251,113,133,0.55), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(251,191,36,0.50), transparent 55%),
    radial-gradient(circle at 70% 85%, rgba(232,121,249,0.45), transparent 55%);
  animation: sunset-drift 32s linear infinite;
  mix-blend-mode: screen;
}
html[data-theme="sunset"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(26,10,31,0.55) 80%, rgba(26,10,31,0.85) 100%);
}

@keyframes sunset-drift {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ============================================================
   2. DEEP SPACE — indigo void + starfield + planetary orbs
   ============================================================ */
html[data-theme="deepspace"] {
  --bg-base: #060614;

  --aurora-pink: #ff7b54;   /* plasma */
  --aurora-cyan: #22d3ee;   /* cyan */
  --aurora-purple: #818cf8; /* indigo */

  --glass-fill: linear-gradient(135deg, rgba(226,232,255,0.08), rgba(226,232,255,0.02));
  --glass-fill-strong: linear-gradient(135deg, rgba(226,232,255,0.14), rgba(226,232,255,0.04));
  --glass-stroke: rgba(226,232,255,0.10);
  --glass-stroke-strong: rgba(226,232,255,0.20);
  --glass-inner-highlight: inset 0 1px 0 rgba(226,232,255,0.14);
  --glass-shadow-soft: 0 6px 22px rgba(0,0,0,0.45);
  --glass-shadow: 0 14px 40px rgba(0,0,0,0.6);

  --text-primary: #e2e8ff;
  --text-secondary: rgba(226,232,255,0.75);
  --text-tertiary: rgba(226,232,255,0.48);
  --text-quaternary: rgba(226,232,255,0.28);

  --state-success: #34d399;
  --state-warning: #fbbf24;
  --state-danger: #ffa07e;
  --state-info: #67e8f9;

  --accent-active: linear-gradient(135deg, rgba(255,123,84,0.24), rgba(129,140,248,0.20));
  --accent-glow: 0 0 18px rgba(255,123,84,0.40);

  --font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="deepspace"] .aurora-shell {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(129,140,248,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(34,211,238,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,123,84,0.10) 0%, transparent 55%),
    var(--bg-base);
  animation: none;
}

/* Starfield + planetary orbs */
html[data-theme="deepspace"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(1px 1px at 75% 15%, rgba(199,210,254,0.85), transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 88% 55%, rgba(103,232,249,0.8), transparent 50%),
    radial-gradient(1.2px 1.2px at 10% 80%, rgba(255,160,126,0.7), transparent 50%),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(1.3px 1.3px at 65% 85%, rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(1px 1px at 30% 50%, rgba(226,232,255,0.8), transparent 50%),
    radial-gradient(1.4px 1.4px at 92% 90%, rgba(255,255,255,0.75), transparent 50%);
  background-size: 120% 120%;
  animation: starfield-twinkle 7s ease-in-out infinite alternate;
}

html[data-theme="deepspace"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at -8% -8%, rgba(255,123,84,0.32), transparent 65%),
    radial-gradient(32vw 32vw at 108% 108%, rgba(34,211,238,0.26), transparent 70%),
    radial-gradient(26vw 26vw at 85% 35%, rgba(129,140,248,0.24), transparent 70%);
  filter: blur(40px);
  animation: deepspace-drift 36s ease-in-out infinite;
}

@keyframes starfield-twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes deepspace-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-20px, 30px) scale(1.04); }
  66%      { transform: translate(25px, -15px) scale(0.98); }
}

/* ============================================================
   3. ARCTIC — LIGHT MODE polar white with ice halos
   IMPORTANT: inverts text/glass vs. all other themes.
   ============================================================ */
html[data-theme="arctic"] {
  --bg-base: #f0f7fd;

  --aurora-pink: #0284c7;   /* ice-deep used as primary accent */
  --aurora-cyan: #38bdf8;   /* glacier */
  --aurora-purple: #7dd3fc; /* ice-light */

  --glass-fill: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.45));
  --glass-fill-strong: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.60));
  --glass-stroke: rgba(10,30,51,0.10);
  --glass-stroke-strong: rgba(10,30,51,0.18);
  --glass-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.95);
  --glass-shadow-soft: 0 4px 18px rgba(10,30,51,0.08);
  --glass-shadow: 0 14px 40px rgba(10,30,51,0.12);

  --text-primary: #0a1e33;
  --text-secondary: rgba(10,30,51,0.72);
  --text-tertiary: rgba(10,30,51,0.48);
  --text-quaternary: rgba(10,30,51,0.32);

  --state-success: #047857;
  --state-warning: #b45309;
  --state-danger: #be123c;
  --state-info: #0284c7;

  --accent-active: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(2,132,199,0.18));
  --accent-glow: 0 4px 14px rgba(2,132,199,0.24);

  --font-sans: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

html[data-theme="arctic"] body.aurora-mode { background: var(--bg-base); }

html[data-theme="arctic"] .aurora-shell {
  background:
    radial-gradient(circle at 20% 10%, rgba(125,211,252,0.45) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(56,189,248,0.32) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(186,230,253,0.30) 0%, transparent 55%),
    var(--bg-base);
  animation: none;
  color: var(--text-primary);
}

/* Replace dark vignette with a light wash */
html[data-theme="arctic"] .aurora-shell::before {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(240,247,253,0.55) 80%, rgba(240,247,253,0.85) 100%);
}

/* Soft ice halos in the background */
html[data-theme="arctic"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50vw 50vw at 10% 0%,   rgba(125,211,252,0.35), transparent 60%),
    radial-gradient(45vw 45vw at 95% 105%, rgba(56,189,248,0.28),  transparent 65%),
    radial-gradient(35vw 35vw at 55% 45%,  rgba(186,230,253,0.25), transparent 70%);
  filter: blur(30px);
  animation: deepspace-drift 42s ease-in-out infinite;
}

/* Crystal ring shimmer */
html[data-theme="arctic"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%,  rgba(56,189,248,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%,  rgba(56,189,248,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 78%,  rgba(56,189,248,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 88%,  rgba(56,189,248,0.15) 0 1px, transparent 2px);
  background-size: 100% 100%;
  opacity: 0.4;
}

/* Inversion: border bottoms & surface tweaks inside aurora components */
html[data-theme="arctic"] .aurora-topbar,
html[data-theme="arctic"] .aurora-subnav {
  border-color: rgba(10,30,51,0.10);
}
html[data-theme="arctic"] .aurora-kbd {
  background: rgba(255,255,255,0.75);
  color: var(--text-secondary);
}
html[data-theme="arctic"] .aurora-subnav__item--active {
  background: linear-gradient(90deg, rgba(56,189,248,0.22), transparent 70%);
  border-left-color: var(--aurora-cyan);
}
html[data-theme="arctic"] .aurora-feed__row {
  border-bottom-color: rgba(10,30,51,0.08);
}
html[data-theme="arctic"] .aurora-brand__dot {
  background: linear-gradient(135deg, #7dd3fc, #0284c7);
  box-shadow: 0 0 16px rgba(2,132,199,0.45);
}
html[data-theme="arctic"] .aurora-btn--primary {
  background: linear-gradient(135deg, rgba(2,132,199,0.95), rgba(56,189,248,0.85));
  color: #ffffff;
}
html[data-theme="arctic"] .aurora-hero__icon {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  box-shadow: 0 8px 24px rgba(2,132,199,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
html[data-theme="arctic"] .aurora-avatar {
  background: linear-gradient(135deg, #7dd3fc, #0284c7);
  color: #ffffff;
}

/* ============================================================
   4. CYBER BLOOM — dark slate with neon magenta/lemon/lime blobs
   ============================================================ */
html[data-theme="cyberbloom"] {
  --bg-base: #0a0a12;

  --aurora-pink: #ec4899;   /* magenta */
  --aurora-cyan: #a3e635;   /* lime */
  --aurora-purple: #c084fc; /* violet */

  --glass-fill: linear-gradient(135deg, rgba(249,247,255,0.08), rgba(249,247,255,0.02));
  --glass-fill-strong: linear-gradient(135deg, rgba(249,247,255,0.14), rgba(249,247,255,0.04));
  --glass-stroke: rgba(249,247,255,0.10);
  --glass-stroke-strong: rgba(249,247,255,0.22);
  --glass-inner-highlight: inset 0 1px 0 rgba(249,247,255,0.18);
  --glass-shadow-soft: 0 6px 22px rgba(0,0,0,0.45);
  --glass-shadow: 0 14px 40px rgba(0,0,0,0.6);

  --text-primary: #f9f7ff;
  --text-secondary: rgba(249,247,255,0.75);
  --text-tertiary: rgba(249,247,255,0.50);
  --text-quaternary: rgba(249,247,255,0.30);

  --state-success: #a3e635;
  --state-warning: #facc15;
  --state-danger: #f472b6;
  --state-info: #c084fc;

  --accent-active: linear-gradient(135deg, rgba(236,72,153,0.28), rgba(234,179,8,0.18));
  --accent-glow: 0 0 20px rgba(236,72,153,0.40);

  --font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="cyberbloom"] .aurora-shell {
  background:
    radial-gradient(circle at 85% 10%, rgba(236,72,153,0.30) 0%, transparent 28%),
    radial-gradient(circle at 10% 85%, rgba(234,179,8,0.22)  0%, transparent 28%),
    radial-gradient(circle at 55% 50%, rgba(132,204,22,0.18) 0%, transparent 32%),
    var(--bg-base);
}

html[data-theme="cyberbloom"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  filter: blur(80px);
  background:
    radial-gradient(640px 640px at 100% 0%, rgba(236,72,153,0.55), transparent 65%),
    radial-gradient(560px 560px at 0%   100%, rgba(234,179,8,0.45), transparent 65%),
    radial-gradient(480px 480px at 35%  60%,  rgba(132,204,22,0.38), transparent 65%),
    radial-gradient(380px 380px at 12%  8%,   rgba(168,85,247,0.32), transparent 65%);
  animation: bloom-pulse 18s ease-in-out infinite;
}
html[data-theme="cyberbloom"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at top,    rgba(10,10,18,0) 0%,  rgba(10,10,18,0.35) 80%),
    linear-gradient(180deg, rgba(10,10,18,0.20) 0%, rgba(10,10,18,0.50) 100%);
}

@keyframes bloom-pulse {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50%      { transform: translate(-24px, 18px) scale(1.08); opacity: 1; }
}

/* ============================================================
   5. OCEAN — abyss-teal void with drifting tide blobs + wave overlay
   ============================================================ */
html[data-theme="ocean"] {
  --bg-base: #031520;

  --aurora-pink: #14b8a6;   /* teal */
  --aurora-cyan: #67e8f9;   /* aqua-hot */
  --aurora-purple: #6366f1; /* indigo */

  --glass-fill: linear-gradient(135deg, rgba(230,244,241,0.08), rgba(230,244,241,0.02));
  --glass-fill-strong: linear-gradient(135deg, rgba(230,244,241,0.14), rgba(230,244,241,0.04));
  --glass-stroke: rgba(230,244,241,0.10);
  --glass-stroke-strong: rgba(230,244,241,0.20);
  --glass-inner-highlight: inset 0 1px 0 rgba(230,244,241,0.18);
  --glass-shadow-soft: 0 6px 22px rgba(3,21,32,0.45);
  --glass-shadow: 0 14px 40px rgba(3,21,32,0.6);

  --text-primary: #e6f4f1;
  --text-secondary: rgba(230,244,241,0.75);
  --text-tertiary: rgba(230,244,241,0.48);
  --text-quaternary: rgba(230,244,241,0.28);

  --state-success: #2dd4bf;
  --state-warning: #fde68a;
  --state-danger: #fda4af;
  --state-info: #67e8f9;

  --accent-active: linear-gradient(135deg, rgba(20,184,166,0.28), rgba(99,102,241,0.18));
  --accent-glow: 0 0 18px rgba(20,184,166,0.38);

  --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="ocean"] .aurora-shell {
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(14,74,95,0.55), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(9,51,69,0.80), transparent 55%),
    linear-gradient(180deg, #021019 0%, var(--bg-base) 40%, #05222f 100%);
  animation: none;
}

html[data-theme="ocean"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  filter: blur(100px);
  background:
    radial-gradient(620px 620px at 0%   0%,   rgba(20,184,166,0.50), transparent 65%),
    radial-gradient(780px 780px at 110% 40%,  rgba(34,211,238,0.34), transparent 70%),
    radial-gradient(560px 560px at 45%  110%, rgba(99,102,241,0.30), transparent 68%);
  animation: ocean-tide 26s ease-in-out infinite;
}

/* Faint wave overlay drifting horizontally */
html[data-theme="ocean"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'><path d='M0 60 Q 150 20 300 60 T 600 60 T 900 60 T 1200 60' stroke='%23e6f4f1' stroke-width='1' fill='none'/><path d='M0 90 Q 150 50 300 90 T 600 90 T 900 90 T 1200 90' stroke='%23e6f4f1' stroke-width='1' fill='none'/><path d='M0 30 Q 150 70 300 30 T 600 30 T 900 30 T 1200 30' stroke='%23e6f4f1' stroke-width='1' fill='none'/></svg>");
  background-repeat: repeat;
  background-size: 1200px 120px;
  animation: ocean-drift 60s linear infinite;
}

@keyframes ocean-tide {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -20px) scale(1.05); }
}
@keyframes ocean-drift {
  from { background-position: 0 0; }
  to   { background-position: 1200px 0; }
}

/* ============================================================
   6. REDUCED MOTION — respect user preference for all themes
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="sunset"]     body::before,
  html[data-theme="deepspace"]  body::before,
  html[data-theme="deepspace"]  body::after,
  html[data-theme="arctic"]     body::before,
  html[data-theme="cyberbloom"] body::before,
  html[data-theme="ocean"]      body::before,
  html[data-theme="ocean"]      body::after { animation: none; }
}

/* ============================================================
   7. THEME PICKER CARDS (Settings > Aspect vizual)
   ============================================================ */
.theme-picker-header { margin-bottom: var(--space-4); }
.theme-picker-header h3 {
  font-size: 16px; font-weight: 600; margin: 0 0 4px;
  color: var(--text-primary);
}
.theme-picker-header p {
  font-size: 13px; color: var(--text-tertiary); margin: 0;
}

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.theme-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner-highlight), var(--glass-shadow-soft);
  cursor: pointer;
  transition: transform var(--motion-normal) var(--easing-spring),
              box-shadow var(--motion-normal) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  display: flex; flex-direction: column; gap: var(--space-3);
  position: relative;
}
.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-inner-highlight), var(--glass-shadow);
  border-color: var(--glass-stroke-strong);
}
.theme-card--active {
  border-color: var(--aurora-cyan);
  box-shadow: var(--accent-glow), var(--glass-inner-highlight), var(--glass-shadow);
}
.theme-card--active::after {
  content: '✓';
  position: absolute;
  top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--aurora-cyan);
  color: #06060e;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.theme-card__swatches {
  display: flex; gap: 6px;
}
.theme-card__swatch {
  flex: 1;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.theme-card__name {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.theme-card__desc {
  font-size: 12px; color: var(--text-tertiary);
  margin: 0; line-height: 1.45;
}

.theme-picker-footer {
  margin-top: var(--space-5);
  display: flex; justify-content: flex-end;
}