/* ═══════════════════════════════════════════════════════════════════
   MyVLT — Design System v2: four switchable themes
   obsidian · aurora · porcelain · carbon
   Each redefines the full token set; a shared modern layer restyles
   core components for all four.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────── OBSIDIAN VAULT — premium private-bank dark ─────────────── */
[data-theme="obsidian"] {
  --bg:             #07080A;
  --bg-deep:        #050608;
  --surface:        #101216;
  --surface-raised: #16191F;
  --surface-high:   #1D2128;
  --primary:        #00E5A0;
  --primary-dim:    #00B27D;
  --primary-glow:   rgba(0,229,160,0.14);
  --secondary:      #FF8A4C;
  --secondary-glow: rgba(255,138,76,0.14);
  --error:          #FF5C5C;
  --warning:        #FFB547;
  --success:        #34D399;
  --text-1:         #F2F4F7;
  --text-2:         rgba(242,244,247,0.62);
  --text-3:         rgba(242,244,247,0.38);
  --divider:        rgba(255,255,255,0.06);
  --card-border:    rgba(255,255,255,0.08);
  --neu:            0 1px 2px rgba(0,0,0,0.5);
  --neu-sm:         0 1px 2px rgba(0,0,0,0.4);
  --neu-inset:      inset 0 1px 3px rgba(0,0,0,0.5);
  --neu-btn:        0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  --neu-pill:       0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  --neu-pill-in:    inset 0 1px 3px rgba(0,0,0,0.5);
  --neu-inset-xs:   inset 0 1px 2px rgba(0,0,0,0.45);
  --header-bg:      rgba(7,8,10,0.82);
  --toggle-track:   #101216;
}

/* ─────────────── AURORA GLASS — luminous frosted indigo ─────────────── */
[data-theme="aurora"] {
  --bg:             #0B0D1A;
  --bg-deep:        #070812;
  --surface:        #151931;
  --surface-raised: #1C2140;
  --surface-high:   #242A52;
  --primary:        #8B5CF6;
  --primary-dim:    #6D3EE0;
  --primary-glow:   rgba(139,92,246,0.20);
  --secondary:      #22D3EE;
  --secondary-glow: rgba(34,211,238,0.18);
  --error:          #FB7185;
  --warning:        #FBBF24;
  --success:        #34D399;
  --text-1:         #EEF0FF;
  --text-2:         rgba(238,240,255,0.62);
  --text-3:         rgba(238,240,255,0.38);
  --divider:        rgba(160,160,255,0.10);
  --card-border:    rgba(160,160,255,0.16);
  --accent-grad:    linear-gradient(135deg, #8B5CF6 0%, #22D3EE 100%);
  --neu:            0 8px 32px rgba(5,6,20,0.55);
  --neu-sm:         0 4px 16px rgba(5,6,20,0.45);
  --neu-inset:      inset 0 1px 3px rgba(5,6,20,0.6);
  --neu-btn:        0 4px 16px rgba(5,6,20,0.45), inset 0 1px 0 rgba(190,190,255,0.10);
  --neu-pill:       0 2px 12px rgba(5,6,20,0.4), inset 0 1px 0 rgba(190,190,255,0.08);
  --neu-pill-in:    inset 0 1px 3px rgba(5,6,20,0.55);
  --neu-inset-xs:   inset 0 1px 2px rgba(5,6,20,0.5);
  --header-bg:      rgba(11,13,26,0.72);
  --toggle-track:   #151931;
}
/* aurora background blobs */
[data-theme="aurora"] body::before,
[data-theme="aurora"] body::after {
  content: '';
  position: fixed;
  width: 60vmax; height: 60vmax;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  transition: none;
}
[data-theme="aurora"] body::before {
  top: -25vmax; right: -20vmax;
  background: radial-gradient(circle, rgba(139,92,246,0.20), transparent 65%);
}
[data-theme="aurora"] body::after {
  bottom: -28vmax; left: -22vmax;
  background: radial-gradient(circle, rgba(34,211,238,0.13), transparent 65%);
}
[data-theme="aurora"] .neu-card {
  background: rgba(28,33,64,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="aurora"] .nav-fab,
[data-theme="aurora"] .v2-btn-primary,
[data-theme="aurora"] .v2-log-btn.done {
  background: var(--accent-grad);
}

/* ─────────────── PORCELAIN — warm editorial light ─────────────── */
[data-theme="porcelain"] {
  --bg:             #FAF8F4;
  --bg-deep:        #F1EEE7;
  --surface:        #FFFFFF;
  --surface-raised: #FBFAF7;
  --surface-high:   #F3F0E9;
  --primary:        #E8590C;
  --primary-dim:    #C74A09;
  --primary-glow:   rgba(232,89,12,0.10);
  --secondary:      #0F766E;
  --secondary-glow: rgba(15,118,110,0.10);
  --error:          #DC2626;
  --warning:        #D97706;
  --success:        #16A34A;
  --text-1:         #1A1B1E;
  --text-2:         rgba(26,27,30,0.62);
  --text-3:         rgba(26,27,30,0.40);
  --divider:        rgba(26,27,30,0.08);
  --card-border:    rgba(26,27,30,0.07);
  --neu:            0 1px 2px rgba(26,27,30,0.04), 0 8px 24px rgba(26,27,30,0.06);
  --neu-sm:         0 1px 2px rgba(26,27,30,0.04), 0 4px 12px rgba(26,27,30,0.05);
  --neu-inset:      inset 0 1px 3px rgba(26,27,30,0.07);
  --neu-btn:        0 1px 2px rgba(26,27,30,0.05), 0 4px 12px rgba(26,27,30,0.06);
  --neu-pill:       0 1px 2px rgba(26,27,30,0.05), 0 2px 8px rgba(26,27,30,0.05);
  --neu-pill-in:    inset 0 1px 3px rgba(26,27,30,0.08);
  --neu-inset-xs:   inset 0 1px 2px rgba(26,27,30,0.06);
  --header-bg:      rgba(250,248,244,0.88);
  --toggle-track:   #F1EEE7;
}
[data-theme="porcelain"] #home-greeting {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-theme="porcelain"] #bottom-nav { box-shadow: 0 -1px 2px rgba(26,27,30,0.04), 0 -8px 24px rgba(26,27,30,0.06); }

/* ─────────────── CARBON & AMBER — luxury instrument dark ─────────────── */
[data-theme="carbon"] {
  --bg:             #111111;
  --bg-deep:        #0B0B0B;
  --surface:        #1B1A18;
  --surface-raised: #232220;
  --surface-high:   #2B2A27;
  --primary:        #F5A524;
  --primary-dim:    #D08A12;
  --primary-glow:   rgba(245,165,36,0.14);
  --secondary:      #E8590C;
  --secondary-glow: rgba(232,89,12,0.14);
  --error:          #F87171;
  --warning:        #FBBF24;
  --success:        #4ADE80;
  --text-1:         #F5F2EC;
  --text-2:         rgba(245,242,236,0.60);
  --text-3:         rgba(245,242,236,0.36);
  --divider:        rgba(255,255,255,0.06);
  --card-border:    rgba(255,255,255,0.07);
  --neu:            0 2px 8px rgba(0,0,0,0.5);
  --neu-sm:         0 1px 4px rgba(0,0,0,0.45);
  --neu-inset:      inset 0 1px 3px rgba(0,0,0,0.55);
  --neu-btn:        0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(245,165,36,0.08);
  --neu-pill:       0 1px 4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  --neu-pill-in:    inset 0 1px 3px rgba(0,0,0,0.5);
  --neu-inset-xs:   inset 0 1px 2px rgba(0,0,0,0.45);
  --header-bg:      rgba(17,17,17,0.85);
  --toggle-track:   #1B1A18;
}
[data-theme="carbon"] .neu-card { border-top: 1px solid rgba(255,255,255,0.05); }
[data-theme="carbon"] #home-ring-text,
[data-theme="carbon"] [id^="home-stat-"] { font-variant-numeric: tabular-nums; }

/* ═══════════════ SHARED MODERN LAYER (all four new themes) ═══════════════ */
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .neu-card {
  border: 1px solid var(--card-border);
  border-radius: 20px;
}
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .neu-btn,
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .neu-inset {
  border: 1px solid var(--card-border);
}

/* floating dock nav */
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) #bottom-nav {
  left: 12px; right: 12px; bottom: 10px;
  height: 64px;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  background: var(--header-bg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .nav-tab {
  border-radius: 14px; padding: 7px 10px;
}

/* header */
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) #app-header {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

/* segmented home tabs */
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .home-tab-bar {
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: none;
  padding: 4px;
}

/* day dots & fab pill */
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .day-dot {
  border: 1px solid var(--card-border); box-shadow: none;
}
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) #fab-pill {
  border: 1px solid var(--card-border);
}

/* sheets, inputs, typographic polish */
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) .v2-sheet {
  border: 1px solid var(--card-border); border-bottom: none;
}
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) h1 {
  letter-spacing: -0.035em;
}
:is([data-theme="obsidian"],[data-theme="aurora"],[data-theme="porcelain"],[data-theme="carbon"]) #home-greeting {
  font-size: 27px;
}

/* ═══════════════ THEME SWITCHER UI ═══════════════ */
.v2-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v2-theme-card {
  border: 1.5px solid var(--divider);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  background: var(--bg);
  text-align: left;
  font-family: 'Geist', sans-serif;
}
.v2-theme-card.active { border-color: var(--primary); background: var(--primary-glow); }
.v2-theme-card .swatches { display: flex; gap: 5px; margin-bottom: 8px; }
.v2-theme-card .sw { width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(127,127,127,0.3); }
.v2-theme-card .tn { font-size: 12.5px; font-weight: 700; color: var(--text-1); }
.v2-theme-card .td { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }