/* ═══════════════════════════════════════════════════════════════════════
   portal-theme.css
   Dance Academy Portal — Theme System
   
   3 themes, all switching via a single body class.
   Theme is stored in localStorage as 'kkkk_theme'.
   
   Usage:
     <body>                → Classic (default)
     <body class="dark">   → Dark Mode
     <body class="ocean">  → Ocean
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CLASSIC (default — existing maroon/gold academy theme) ─────────── */
:root {
  --primary:        #4A0E17;
  --primary-deep:   #350a10;
  --primary-light:  #7a2030;
  --accent:         #C9A24B;
  --accent-light:   #E8BC60;
  --accent-pale:    #f2dfa0;
  --bg:             #f7f4f0;
  --surface:        #ffffff;
  --surface-alt:    #F5EBE6;
  --border:         #d8c4b8;
  --border-strong:  #c9a07a;
  --ink:            #2c2c2c;
  --ink-muted:      #7a5c46;
  --ink-faint:      #8a7456;
  --error:          #c0392b;
  --error-bg:       #fdf2f2;
  --success:        #2e7d32;
  --success-light:  #66bb6a;
  --info-bg:        #fdf6ec;
  --info-text:      #7a5c2e;
  --shadow:         rgba(74,14,23,0.10);
  --shadow-strong:  rgba(74,14,23,0.20);

  /* Topbar */
  --topbar-bg:      #4A0E17;
  --topbar-text:    #F5EBE6;
  --topbar-accent:  #C9A24B;

  /* Tabs */
  --tab-bg:         #ffffff;
  --tab-active:     #4A0E17;
  --tab-active-text:#C9A24B;
  --tab-hover:      #F5EBE6;
  --tab-border:     #C9A24B;

  /* Alert strip */
  --strip-from:     #2e7d32;
  --strip-to:       #1b5e20;

  /* Buttons */
  --btn-primary-bg: #4A0E17;
  --btn-primary-text:#F5EBE6;
  --btn-ghost-border:#C9A24B;
  --btn-ghost-text: #4A0E17;

  /* Form inputs */
  --input-border:   #d8c4b8;
  --input-focus:    #4A0E17;
  --input-bg:       #ffffff;

  /* Panel heading */
  --heading-bg:     #4A0E17;
  --heading-text:   #C9A24B;

  /* Theme name (shown in switcher) */
  --theme-name:     "Classic";
  --green:          #2e7d32;
  --green-light:    #66bb6a;
}

/* ── DARK MODE ──────────────────────────────────────────────────────── */
body.dark {
  --primary:        #1a1a2e;
  --primary-deep:   #0f0f1a;
  --primary-light:  #16213e;
  --accent:         #f0a500;
  --accent-light:   #ffcc44;
  --accent-pale:    #3d2e00;
  --bg:             #121212;
  --surface:        #1e1e2e;
  --surface-alt:    #252535;
  --border:         #333355;
  --border-strong:  #f0a500;
  --ink:            #e0e0e0;
  --ink-muted:      #a0a0c0;
  --ink-faint:      #7070a0;
  --error:          #ef5350;
  --error-bg:       #2d1010;
  --success:        #66bb6a;
  --success-light:  #a5d6a7;
  --info-bg:        #1e2a1e;
  --info-text:      #a5d6a7;
  --shadow:         rgba(0,0,0,0.40);
  --shadow-strong:  rgba(0,0,0,0.60);

  --topbar-bg:      #0f0f1a;
  --topbar-text:    #e0e0e0;
  --topbar-accent:  #f0a500;

  --tab-bg:         #1e1e2e;
  --tab-active:     #f0a500;
  --tab-active-text:#0f0f1a;
  --tab-hover:      #252535;
  --tab-border:     #f0a500;

  --strip-from:     #1a3a1a;
  --strip-to:       #0f250f;

  --btn-primary-bg: #f0a500;
  --btn-primary-text:#0f0f1a;
  --btn-ghost-border:#f0a500;
  --btn-ghost-text: #f0a500;

  --input-border:   #333355;
  --input-focus:    #f0a500;
  --input-bg:       #252535;

  --heading-bg:     #0f0f1a;
  --heading-text:   #f0a500;

  --theme-name:     "Dark";
  --green:          #388e3c;
  --green-light:    #81c784;
}

/* ── OCEAN ──────────────────────────────────────────────────────────── */
body.ocean {
  --primary:        #0d2b45;
  --primary-deep:   #071d30;
  --primary-light:  #1a4060;
  --accent:         #00b4d8;
  --accent-light:   #48cae4;
  --accent-pale:    #caf0f8;
  --bg:             #f0f7fa;
  --surface:        #ffffff;
  --surface-alt:    #e8f4f8;
  --border:         #b0d4e3;
  --border-strong:  #00b4d8;
  --ink:            #1a2c3d;
  --ink-muted:      #4a6a7a;
  --ink-faint:      #6a8a9a;
  --error:          #d32f2f;
  --error-bg:       #fdecea;
  --success:        #2e7d32;
  --success-light:  #66bb6a;
  --info-bg:        #e0f4ff;
  --info-text:      #0d4f6e;
  --shadow:         rgba(13,43,69,0.12);
  --shadow-strong:  rgba(13,43,69,0.22);

  --topbar-bg:      #0d2b45;
  --topbar-text:    #e8f4f8;
  --topbar-accent:  #00b4d8;

  --tab-bg:         #ffffff;
  --tab-active:     #0d2b45;
  --tab-active-text:#00b4d8;
  --tab-hover:      #e8f4f8;
  --tab-border:     #00b4d8;

  --strip-from:     #0d6e8a;
  --strip-to:       #094d62;

  --btn-primary-bg: #0d2b45;
  --btn-primary-text:#e8f4f8;
  --btn-ghost-border:#00b4d8;
  --btn-ghost-text: #0d2b45;

  --input-border:   #b0d4e3;
  --input-focus:    #0d2b45;
  --input-bg:       #ffffff;

  --heading-bg:     #0d2b45;
  --heading-text:   #00b4d8;

  --theme-name:     "Ocean";
  --green:          #2e7d32;
  --green-light:    #66bb6a;
}

/* ── THEME SWITCHER WIDGET ──────────────────────────────────────────── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 16px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.theme-switcher label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.theme-btn {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.theme-btn:hover  { transform: scale(1.15); }
.theme-btn.active { border-color: var(--accent); }
.theme-btn.classic { background: linear-gradient(135deg, #4A0E17 50%, #C9A24B 50%); }
.theme-btn.dark    { background: linear-gradient(135deg, #1a1a2e 50%, #f0a500 50%); }
.theme-btn.ocean   { background: linear-gradient(135deg, #0d2b45 50%, #00b4d8 50%); }