*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════ STANDARD (Light) Theme — Default ══════════════ */
:root {
  /* Surfaces */
  --bg:             #FFFFFF;
  --bg-elev:        #EEF4FF;
  --surface:        #E0EAFF;
  --surface-2:      #D5E1FF;
  --surface-hover:  #C8D8FF;
  --border:         rgba(6,42,116,0.12);
  --border-strong:  rgba(6,42,116,0.22);
  --border-faint:   rgba(6,42,116,0.06);

  /* Primary — Ocean Blue v-500 */
  --primary:        #2862DC;
  --primary-soft:   rgba(40,98,220,0.10);
  --primary-glow:   rgba(40,98,220,0.18);
  --primary-edge:   rgba(40,98,220,0.25);

  /* Semantic — fixed across themes */
  --success:        #51CD37;
  --success-soft:   rgba(81,205,55,0.12);
  --success-edge:   rgba(81,205,55,0.28);

  --destructive:      #FF5005;
  --destructive-soft: rgba(255,80,5,0.10);
  --destructive-edge: rgba(255,80,5,0.25);

  --warning:        #FF9705;
  --warning-soft:   rgba(255,151,5,0.10);
  --warning-edge:   rgba(255,151,5,0.25);

  --info:           #37CDC1;
  --info-soft:      rgba(55,205,193,0.10);
  --info-edge:      rgba(55,205,193,0.25);

  /* Text — Ocean Blue */
  --text:           #062A74;
  --text-dim:       #1A4CA0;
  --text-mute:      #6B8EC0;

  /* UI chrome alpha helpers */
  --alpha-surface:  rgba(40,98,220,0.05);
  --alpha-hover:    rgba(40,98,220,0.09);
  --alpha-stroke:   rgba(6,42,116,0.07);
  --alpha-toggle:   rgba(6,42,116,0.09);

  /* Per-theme gradients & misc */
  --sidebar-gradient: linear-gradient(180deg, #EEF4FF 0%, #FFFFFF 100%);
  --topbar-gradient:  linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
  --dot-color:        rgba(6,42,116,0.05);
  --primary-text:     #FFFFFF;
  --brand-icon-text:  #FFFFFF;
  --user-menu-bg:     var(--surface-2);
  --ambient-a:        rgba(40,98,220,0.07);
  --ambient-b:        rgba(55,205,193,0.05);

  /* Layout */
  --sidebar-w:      260px;
  --radius:         12px;
  --radius-sm:      8px;
  --radius-xs:      6px;
  --topbar-h:       54px;
}

/* ══════════════ DEEP SPACE (Dark) Theme ══════════════ */
html.theme-dark, body.theme-dark {
  --bg:             #191D24;
  --bg-elev:        #1F242E;
  --surface:        #232935;
  --surface-2:      #2A3040;
  --surface-hover:  #303848;
  --border:         rgba(239,247,255,0.08);
  --border-strong:  rgba(239,247,255,0.16);
  --border-faint:   rgba(239,247,255,0.04);

  --primary:        #9EF09E;
  --primary-soft:   rgba(158,240,158,0.12);
  --primary-glow:   rgba(158,240,158,0.20);
  --primary-edge:   rgba(158,240,158,0.28);

  --success:        #51CD37;
  --success-soft:   rgba(81,205,55,0.12);
  --success-edge:   rgba(81,205,55,0.28);

  --destructive:      #FF5005;
  --destructive-soft: rgba(255,80,5,0.11);
  --destructive-edge: rgba(255,80,5,0.25);

  --warning:        #FF9C41;
  --warning-soft:   rgba(255,156,65,0.11);
  --warning-edge:   rgba(255,156,65,0.25);

  --info:           #5566FC;
  --info-soft:      rgba(85,102,252,0.11);
  --info-edge:      rgba(85,102,252,0.25);

  --text:           #EFF7FF;
  --text-dim:       #DADFE9;
  --text-mute:      #8090B0;

  --alpha-surface:  rgba(255,255,255,0.04);
  --alpha-hover:    rgba(255,255,255,0.07);
  --alpha-stroke:   rgba(255,255,255,0.07);
  --alpha-toggle:   rgba(255,255,255,0.08);

  --sidebar-gradient: linear-gradient(180deg, #1E2432 0%, #191D24 100%);
  --topbar-gradient:  linear-gradient(180deg, #1F242E 0%, #1A1F28 100%);
  --dot-color:        rgba(255,255,255,0.024);
  --primary-text:     #051319;
  --brand-icon-text:  #051319;
  --user-menu-bg:     linear-gradient(135deg, #1A3050, #0E1E34);
  --ambient-a:        rgba(158,240,158,0.06);
  --ambient-b:        rgba(85,102,252,0.04);
}