/* Liquid Glass tokens — Panel (#225a). Variables-only port van BOSS/
   tokens.css; body-overrides en brand-gradient zitten in glass.css zodat
   Panel's bestaande typografie ongebroken blijft. BOSS-tokens (geen
   prefix) leven naast Panel's --admin-* prefix — geen collision.

   Brand-modus vereist Montserrat italic 200-700:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700&display=swap">
*/

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-pill: 100px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* ═══════════════════ DAY ═══════════════════ */
[data-theme="day"],
[data-theme="auto"] {
  --bg-base:      #F5F4F0;
  --bg-elev-1:    rgba(255, 255, 255, 0.55);
  --bg-elev-2:    rgba(255, 255, 255, 0.78);
  --bg-elev-3:    rgba(255, 255, 255, 0.92);
  --ink:          #0A0A12;
  --ink-soft:     rgba(10, 10, 18, 0.72);
  --ink-muted:    rgba(10, 10, 18, 0.50);
  --ink-faint:    rgba(10, 10, 18, 0.28);
  --border-glass: rgba(255, 255, 255, 0.60);
  --border-soft:  rgba(10, 10, 18, 0.08);
  --accent:       #4E6EE8;
  --accent-soft:  rgba(78, 110, 232, 0.14);
  --inner-spec:   rgba(255, 255, 255, 0.35);
  --shadow-sm:    0 6px 20px -8px rgba(10, 10, 18, 0.10);
  --shadow-md:    0 24px 60px -24px rgba(10, 10, 18, 0.18);
  --shadow-lg:    0 40px 100px -30px rgba(10, 10, 18, 0.22);
  --btn-bg:       var(--ink);
  --btn-fg:       var(--bg-base);
  --font-stack:   'Inter', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════ NIGHT ═══════════════════ */
[data-theme="night"] {
  --bg-base:      #0E1116;
  --bg-elev-1:    rgba(30, 34, 44, 0.55);
  --bg-elev-2:    rgba(36, 40, 52, 0.78);
  --bg-elev-3:    rgba(42, 48, 60, 0.94);
  --ink:          #F2F4F8;
  --ink-soft:     rgba(242, 244, 248, 0.78);
  --ink-muted:    rgba(242, 244, 248, 0.52);
  --ink-faint:    rgba(242, 244, 248, 0.30);
  --border-glass: rgba(255, 255, 255, 0.10);
  --border-soft:  rgba(255, 255, 255, 0.06);
  --accent:       #7B98F0;
  --accent-soft:  rgba(123, 152, 240, 0.18);
  --inner-spec:   rgba(255, 255, 255, 0.06);
  --shadow-sm:    0 6px 20px -8px rgba(0, 0, 0, 0.45);
  --shadow-md:    0 24px 60px -24px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 40px 100px -30px rgba(0, 0, 0, 0.65);
  --btn-bg:       var(--accent);
  --btn-fg:       #0E1116;
  --font-stack:   'Inter', system-ui, -apple-system, sans-serif;
}

/* Auto volgt OS-voorkeur: bij prefers-color-scheme:dark zwicht naar
   de night-tokens. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-base:      #0E1116;
    --bg-elev-1:    rgba(30, 34, 44, 0.55);
    --bg-elev-2:    rgba(36, 40, 52, 0.78);
    --bg-elev-3:    rgba(42, 48, 60, 0.94);
    --ink:          #F2F4F8;
    --ink-soft:     rgba(242, 244, 248, 0.78);
    --ink-muted:    rgba(242, 244, 248, 0.52);
    --ink-faint:    rgba(242, 244, 248, 0.30);
    --border-glass: rgba(255, 255, 255, 0.10);
    --border-soft:  rgba(255, 255, 255, 0.06);
    --accent:       #7B98F0;
    --accent-soft:  rgba(123, 152, 240, 0.18);
    --inner-spec:   rgba(255, 255, 255, 0.06);
    --shadow-sm:    0 6px 20px -8px rgba(0, 0, 0, 0.45);
    --shadow-md:    0 24px 60px -24px rgba(0, 0, 0, 0.55);
    --shadow-lg:    0 40px 100px -30px rgba(0, 0, 0, 0.65);
    --btn-bg:       var(--accent);
    --btn-fg:       #0E1116;
  }
}

/* ═══════════════════ BRAND — PROJEXT huisstijl ═══════════════════ */
[data-theme="brand"] {
  --bg-base:      #FBFAF6;
  --bg-elev-1:    rgba(251, 250, 246, 0.55);
  --bg-elev-2:    rgba(251, 250, 246, 0.82);
  --bg-elev-3:    rgba(251, 250, 246, 0.92);
  --ink:          #0F1430;
  --ink-soft:     rgba(15, 20, 48, 0.72);
  --ink-muted:    rgba(15, 20, 48, 0.55);
  --ink-faint:    rgba(15, 20, 48, 0.28);
  --border-glass: rgba(255, 255, 255, 0.55);
  --border-soft:  rgba(15, 20, 48, 0.08);
  --mint:         #C8F0D8;
  --blue:         #BCDCFB;
  --lavender:     #D8D4F5;
  --powder:       #9FB8E8;
  --accent:       var(--powder);
  --accent-soft:  rgba(159, 184, 232, 0.22);
  --inner-spec:   rgba(255, 255, 255, 0.40);
  --shadow-sm:    0 6px 20px -8px rgba(15, 20, 48, 0.18);
  --shadow-md:    0 24px 60px -24px rgba(15, 20, 48, 0.25);
  --shadow-lg:    0 40px 100px -30px rgba(15, 20, 48, 0.30);
  --btn-bg:       var(--ink);
  --btn-fg:       var(--bg-base);
  --font-stack:   'Montserrat', system-ui, -apple-system, sans-serif;
}