/* ══════════════════════════════════════════════════════════════════════
   WeissGuitar Learn — Design Tokens
   Single source of truth for all visual values.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (locked, identical in both themes) ────────────────────── */
  --purple: #6036e8;
  --pink: #ca3fa0;
  --brand-gradient: linear-gradient(135deg, #6036e8, #ca3fa0);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-display: 'Suwannaphum', serif;

  /* Type scale (8 sizes, strict) */
  --text-xs: 0.6875rem;   /* 11px - absolute minimum, metadata only */
  --text-sm: 0.8125rem;   /* 13px - labels, captions */
  --text-base: 0.9375rem; /* 15px - body text */
  --text-md: 1.0625rem;   /* 17px - emphasized body */
  --text-lg: 1.25rem;     /* 20px - section titles */
  --text-xl: 1.375rem;    /* 22px - card headings */
  --text-2xl: 1.75rem;    /* 28px - page headings */
  --text-3xl: 2.125rem;   /* 34px - hero headings */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing (4px grid) ──────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 100px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  /* ── Touch targets ──────────────────────────────────────────────── */
  --tap-min: 44px;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --sidebar-width: 340px;
  --header-height: 64px;

  /* ── Phase colors (from roadmap, per-course) ─────────────────────── */
  --phase-color: #6036e8;
  --phase-color-rgb: 96, 54, 232;
  --phase-gradient: linear-gradient(135deg, #6036e8, #7c5ce8);
}

/* Phase overrides per data attribute */
[data-phase="1"] { --phase-color: #6036e8; --phase-color-rgb: 96, 54, 232; --phase-gradient: linear-gradient(135deg, #6036e8, #7c5ce8); }
[data-phase="2"] { --phase-color: #2563eb; --phase-color-rgb: 37, 99, 235; --phase-gradient: linear-gradient(135deg, #2563eb, #3b82f6); }
[data-phase="3"] { --phase-color: #059669; --phase-color-rgb: 5, 150, 105; --phase-gradient: linear-gradient(135deg, #059669, #34d399); }
[data-phase="4"] { --phase-color: #db2777; --phase-color-rgb: 219, 39, 119; --phase-gradient: linear-gradient(135deg, #db2777, #f472b6); }
[data-phase="5"] { --phase-color: #d97706; --phase-color-rgb: 217, 119, 6; --phase-gradient: linear-gradient(135deg, #d97706, #fbbf24); }
[data-phase="6"] { --phase-color: #dc2626; --phase-color-rgb: 220, 38, 38; --phase-gradient: linear-gradient(135deg, #dc2626, #f87171); }


/* ══════════════════════════════════════════════════════════════════════
   DARK THEME — Galactic Glass (default)
   ══════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  --bg-deep: #050510;
  --bg-content: #2A253A;
  --bg-sidebar: #1E192D;
  --bg-header: #1E192D;
  --bg-card: rgba(18, 14, 32, 0.55);
  --bg-hover: rgba(96, 54, 232, 0.08);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --field-bg: rgba(5, 5, 16, 0.8);

  --text-primary: #f0eef6;
  --text-secondary: #b8aed4;
  --text-muted: #a097c0;
  --purple-text: #9b7ef8; /* AA-safe purple for text on dark backgrounds */

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(155, 77, 202, 0.3);

  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --blue: #60a5fa;

  /* Glass system */
  --glass-blur: blur(20px) saturate(180%);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shine: rgba(255, 255, 255, 0.06);
  --glass-line: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.12) 20%,
    rgba(96,54,232,0.35) 40%, rgba(202,63,160,0.25) 60%,
    rgba(255,255,255,0.12) 80%, transparent);

  /* Shadows */
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.04) inset,
                 inset 0 1px 0 0 rgba(255,255,255,0.08),
                 0 20px 60px rgba(0,0,0,0.35),
                 0 0 100px rgba(96,54,232,0.04);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(96,54,232,0.15);
  --shadow-btn: 0 0 0 1px rgba(255,255,255,0.03) inset,
                inset 0 1px 0 0 rgba(255,255,255,0.06),
                0 4px 16px rgba(0,0,0,0.15);

  /* Orbs */
  --orb-1-color: rgba(96,54,232,0.18);
  --orb-2-color: rgba(202,63,160,0.12);
  --orb-3-color: rgba(96,54,232,0.10);
  --orb-blur: 100px;
  --orb-noise-opacity: 0.4;

  /* Component-specific */
  --insight-bg: rgba(96, 54, 232, 0.06);
  --insight-border: rgba(96, 54, 232, 0.15);
  --exercise-bg: rgba(52, 211, 153, 0.04);
  --exercise-border: rgba(52, 211, 153, 0.15);
  --tip-bg: rgba(251, 191, 36, 0.04);
  --tip-border: rgba(251, 191, 36, 0.12);
  --mentorship-bg: rgba(202, 63, 160, 0.06);
  --mentorship-border: rgba(202, 63, 160, 0.15);

  --sidebar-overlay: rgba(5, 5, 16, 0.7);
  --scrollbar-thumb: rgba(96,54,232,0.2);
  --scrollbar-thumb-hover: rgba(96,54,232,0.4);
}


/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME — Studio Light
   ══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg-deep: #F8F6F3;
  --bg-content: #F0EDE8;
  --bg-sidebar: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.82);
  --bg-hover: rgba(96, 54, 232, 0.05);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --field-bg: rgba(255, 255, 255, 0.95);

  --text-primary: #1A1625;
  --text-secondary: #4A4458;
  --text-muted: #736E82;

  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-hover: rgba(96, 54, 232, 0.22);

  --green: #059669;
  --amber: #d97706;
  --red: #dc2626;
  --blue: #2563eb;

  /* Glass system */
  --glass-blur: blur(20px) saturate(120%);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-shine: rgba(255, 255, 255, 0.8);
  --glass-line: linear-gradient(90deg,
    transparent, rgba(0,0,0,0.06) 20%,
    rgba(96,54,232,0.28) 40%, rgba(202,63,160,0.18) 60%,
    rgba(0,0,0,0.06) 80%, transparent);

  /* Shadows */
  --shadow-card: 0 1px 0 0 rgba(255,255,255,0.8) inset,
                 0 4px 12px rgba(0,0,0,0.04),
                 0 20px 60px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-btn: 0 1px 3px rgba(0,0,0,0.04);

  /* Orbs */
  --orb-1-color: rgba(96,54,232,0.06);
  --orb-2-color: rgba(202,63,160,0.04);
  --orb-3-color: rgba(96,54,232,0.03);
  --orb-blur: 120px;
  --orb-noise-opacity: 0.08;

  /* Component-specific */
  --insight-bg: rgba(96, 54, 232, 0.04);
  --insight-border: rgba(96, 54, 232, 0.12);
  --exercise-bg: rgba(5, 150, 105, 0.04);
  --exercise-border: rgba(5, 150, 105, 0.15);
  --tip-bg: rgba(217, 119, 6, 0.04);
  --tip-border: rgba(217, 119, 6, 0.15);
  --mentorship-bg: rgba(202, 63, 160, 0.04);
  --mentorship-border: rgba(202, 63, 160, 0.15);

  --sidebar-overlay: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb: rgba(96,54,232,0.1);
  --scrollbar-thumb-hover: rgba(96,54,232,0.2);
}


/* ══════════════════════════════════════════════════════════════════════
   THEME TRANSITION
   ══════════════════════════════════════════════════════════════════════ */

html.theme-shifting,
html.theme-shifting *,
html.theme-shifting *::before,
html.theme-shifting *::after {
  transition: background-color 0.5s ease,
              background 0.5s ease,
              color 0.35s ease,
              border-color 0.4s ease,
              box-shadow 0.5s ease,
              opacity 0.5s ease !important;
}
html.theme-shifting .bg-orb {
  transition: opacity 0.8s ease, background 0.8s ease !important;
}


/* ══════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════════════ */

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: transparent;
  cursor: pointer; color: var(--text-muted); transition: all 0.25s ease;
  flex-shrink: 0; padding: 0; font-size: 0;
}
.theme-toggle:hover {
  color: var(--text-primary); border-color: var(--border-hover);
  background: var(--bg-hover);
}
.theme-toggle svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease-spring); }
.theme-toggle:hover svg { transform: rotate(15deg); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }