/* ═══════════════════════════════════════════════════════════
   WAVBASE DESIGN TOKEN SYSTEM
   Three-Layer Architecture: Primitive → Semantic → Component

   Brand: Music Studio Collective (Mixing, Mastering, Production)
   Aesthetic: Premium, warm — Hotel-Lounge (Dark) / Café (Light)

   Dark Theme:  Champagner #C9A96E auf warmem Dunkelgrau #1C1A17
   Light Theme: Terracotta #C47D5A auf Cream #F5F0E8

   Usage: @import 'wavbase-tokens.css'; or <link> in HTML
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   LAYER 1: PRIMITIVE TOKENS
   Raw values without semantic meaning. Never use directly.
   ═══════════════════════════════════════════════════════════ */
:root {

  /* ─── Color: Champagner Scale (Dark Theme Accent) ─── */
  --k2-champagne-50:  hsl(39 46% 95%);
  --k2-champagne-100: hsl(39 46% 88%);
  --k2-champagne-200: hsl(39 46% 78%);
  --k2-champagne-300: hsl(39 46% 71%);
  --k2-champagne-400: hsl(39 46% 61%);   /* #C9A96E — PRIMARY */
  --k2-champagne-500: hsl(39 46% 51%);
  --k2-champagne-600: hsl(39 46% 41%);
  --k2-champagne-700: hsl(39 46% 31%);
  --k2-champagne-800: hsl(39 46% 21%);
  --k2-champagne-900: hsl(39 46% 14%);

  /* ─── Color: Terracotta Scale (Light Theme Accent) ─── */
  --k2-terra-hsl-400: 20 47% 56%;    /* HSL-Triplet für alpha-Uses */
  --k2-terra-hsl-500: 20 47% 46%;
  --k2-terra-50:  hsl(20 47% 95%);
  --k2-terra-100: hsl(20 47% 88%);
  --k2-terra-200: hsl(20 47% 78%);
  --k2-terra-300: hsl(20 47% 68%);
  --k2-terra-400: hsl(20 47% 56%);   /* #C47D5A — PRIMARY */
  --k2-terra-500: hsl(20 47% 46%);
  --k2-terra-600: hsl(20 47% 36%);
  --k2-terra-700: hsl(20 47% 28%);
  --k2-terra-800: hsl(20 47% 20%);
  --k2-terra-900: hsl(20 47% 14%);

  /* ─── Color: Warm Neutral Scale ─── */
  --k2-neutral-50:  hsl(37 39% 97%);
  --k2-neutral-100: hsl(37 30% 94%);
  --k2-neutral-200: hsl(37 20% 89%);
  --k2-neutral-300: hsl(36 16% 78%);
  --k2-neutral-400: hsl(36 10% 58%);
  --k2-neutral-500: hsl(36 8% 42%);
  --k2-neutral-600: hsl(36 6% 32%);
  --k2-neutral-700: hsl(36 6% 24%);
  --k2-neutral-800: hsl(36 8% 16%);
  --k2-neutral-900: hsl(36 10% 10%);   /* ≈ #1C1A17 */
  --k2-neutral-950: hsl(36 10% 7%);

  /* ─── Color: Status ─── */
  --k2-success-400: hsl(142 71% 45%);
  --k2-success-500: hsl(142 76% 36%);
  --k2-success-600: hsl(142 76% 28%);
  --k2-error-400:   hsl(0 84% 60%);
  --k2-error-500:   hsl(0 62.8% 30.6%);
  --k2-warning-400: hsl(45 93% 47%);
  --k2-warning-500: hsl(45 93% 40%);
  --k2-info-400:    hsl(217 91% 60%);
  --k2-info-500:    hsl(217 91% 50%);

  /* ─── Typography: Font Families ─── */
  --k2-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --k2-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ─── Typography: Font Sizes ─── */
  --k2-text-2xs:  0.625rem;   /* 10px — badges only */
  --k2-text-xs:   0.75rem;    /* 12px */
  --k2-text-sm:   0.8125rem;  /* 13px */
  --k2-text-base: 0.875rem;   /* 14px — minimum body */
  --k2-text-md:   1rem;       /* 16px */
  --k2-text-lg:   1.125rem;   /* 18px */
  --k2-text-xl:   1.25rem;    /* 20px */
  --k2-text-2xl:  1.5rem;     /* 24px */
  --k2-text-3xl:  1.875rem;   /* 30px */
  --k2-text-4xl:  2.25rem;    /* 36px */

  /* ─── Typography: Font Weights ─── */
  --k2-weight-normal:   400;
  --k2-weight-medium:   500;
  --k2-weight-semibold: 600;
  --k2-weight-bold:     700;

  /* ─── Typography: Line Heights ─── */
  --k2-leading-none:   1;
  --k2-leading-tight:  1.25;
  --k2-leading-snug:   1.375;
  --k2-leading-normal: 1.5;
  --k2-leading-relaxed: 1.625;

  /* ─── Typography: Letter Spacing ─── */
  --k2-tracking-tighter: -0.025em;
  --k2-tracking-tight:   -0.01em;
  --k2-tracking-normal:  0;
  --k2-tracking-wide:    0.02em;
  --k2-tracking-wider:   0.05em;
  --k2-tracking-widest:  0.1em;

  /* ─── Spacing (4px base) ─── */
  --k2-space-0:   0;
  --k2-space-px:  1px;
  --k2-space-0-5: 0.125rem;  /* 2px */
  --k2-space-1:   0.25rem;   /* 4px */
  --k2-space-1-5: 0.375rem;  /* 6px */
  --k2-space-2:   0.5rem;    /* 8px */
  --k2-space-2-5: 0.625rem;  /* 10px */
  --k2-space-3:   0.75rem;   /* 12px */
  --k2-space-4:   1rem;      /* 16px */
  --k2-space-5:   1.25rem;   /* 20px */
  --k2-space-6:   1.5rem;    /* 24px */
  --k2-space-8:   2rem;      /* 32px */
  --k2-space-10:  2.5rem;    /* 40px */
  --k2-space-12:  3rem;      /* 48px */
  --k2-space-16:  4rem;      /* 64px */

  /* ─── Border Radius ─── */
  --k2-radius-xs:   calc(0.5rem - 6px);
  --k2-radius-sm:   calc(0.5rem - 4px);
  --k2-radius-md:   calc(0.5rem - 2px);
  --k2-radius-base: 0.5rem;
  --k2-radius-lg:   0.75rem;
  --k2-radius-xl:   1rem;
  --k2-radius-2xl:  1.5rem;
  --k2-radius-full: 9999px;

  /* ─── Shadows (Dark — warm tones) ─── */
  --k2-shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --k2-shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --k2-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --k2-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --k2-shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --k2-shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ─── Transitions ─── */
  --k2-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --k2-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --k2-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --k2-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --k2-duration-fast:    100ms;
  --k2-duration-normal:  150ms;
  --k2-duration-slow:    200ms;
  --k2-duration-slower:  300ms;
  --k2-duration-slowest: 500ms;

  /* ─── Z-Index Scale ─── */
  --k2-z-base:     1;
  --k2-z-dropdown: 10;
  --k2-z-sticky:   20;
  --k2-z-topbar:   30;
  --k2-z-sidebar:  40;
  --k2-z-popover:  45;
  --k2-z-overlay:  50;
  --k2-z-modal:    60;
  --k2-z-toast:    200;
}


/* ═══════════════════════════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS — DARK THEME (Default)
   Hotel-Lounge: Champagner #C9A96E auf warmem Dunkelgrau #1C1A17
   ═══════════════════════════════════════════════════════════ */
:root,
html.dark {
  /* ─── Surface Colors (warm dark, Hotel-Lounge) ─── */
  --background:           36 10% 10%;       /* #1C1A17 */
  --foreground:           37 20% 92%;       /* warmes Off-White */
  --card:                 36 8% 13%;
  --card-foreground:      37 20% 92%;
  --popover:              36 8% 15%;
  --popover-foreground:   37 20% 92%;

  /* ─── Interactive Colors ─── */
  --primary:              39 46% 61%;       /* Champagner #C9A96E */
  --primary-foreground:   36 10% 10%;       /* Dunkelgrau */
  --secondary:            36 8% 16%;
  --secondary-foreground: 37 20% 92%;
  --muted:                36 6% 18%;
  --muted-foreground:     36 10% 55%;
  --accent:               36 8% 16%;
  --accent-foreground:    37 20% 92%;

  /* ─── Status Colors ─── */
  --destructive:            0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --success:                142 76% 36%;
  --info:                   217 91% 60%;
  --warning:                45 93% 47%;

  /* ─── Border & Input ─── */
  --border:  36 6% 20%;
  --input:   36 6% 18%;
  --ring:    39 46% 61%;                    /* Champagner */

  /* ─── Brand Accent ─── */
  --gold:                 39 46% 61%;       /* Champagner */
  --gold-foreground:      36 10% 10%;

  /* ─── Status-Akzente (für Toast/Pill/Borders, getrennt von destructive/success/warning Status-Tokens) ─── */
  --status-error:         0 72% 51%;        /* knalliges Rot für Pills + Borders */
  --status-success:       142 70% 45%;      /* Grün für „Genehmigt"-Pills */
  --status-success-strong: 142 76% 36%;     /* dunkleres Grün für Buttons */
  --status-warning:       38 92% 50%;       /* Amber für „wartet"-Pills */
  --status-info:          217 91% 60%;      /* Blau für Hinweise */

  /* ─── Terra-Skala → Gold-Skala (im Dark Mode statt Terracotta) ─── */
  --k2-terra-hsl-400: 39 46% 61%;
  --k2-terra-hsl-500: 39 46% 50%;
  --k2-terra-50:  hsl(39 46% 95%);
  --k2-terra-100: hsl(39 46% 88%);
  --k2-terra-200: hsl(39 46% 78%);
  --k2-terra-300: hsl(39 46% 70%);
  --k2-terra-400: hsl(39 46% 61%);
  --k2-terra-500: hsl(39 46% 50%);
  --k2-terra-600: hsl(39 46% 40%);
  --k2-terra-700: hsl(39 46% 30%);
  --k2-terra-800: hsl(39 46% 22%);
  --k2-terra-900: hsl(39 46% 14%);

  /* ─── Layout ─── */
  --radius:               0.5rem;
  --sidebar-width:        260px;
  --sidebar-collapsed:    60px;
  --topbar-height:        56px;
  --content-max:          1700px;
  --content-pad:          clamp(1rem, 2vw, 2rem);
}

/* Sidebar auf mittelbreiten Screens dezenter (1280–1400px), mehr Platz für Content */
@media (max-width: 1400px) {
  :root {
    --sidebar-width: 220px;
  }
}

:root {

  /* ─── Sidebar (Dark) ─── */
  --sidebar-bg:           rgba(24, 22, 19, 0.85);
  --sidebar-border:       rgba(201, 169, 110, 0.08);
  --sidebar-text:         rgba(237, 230, 216, 0.6);
  --sidebar-text-active:  hsl(39 46% 61%);
  --sidebar-hover:        rgba(201, 169, 110, 0.06);
  --sidebar-active-bg:    rgba(201, 169, 110, 0.1);

  /* ─── Glass Effect (Dark) ─── */
  --glass-bg:             rgba(201, 169, 110, 0.03);
  --glass-border:         rgba(201, 169, 110, 0.06);
  --glass-blur:           40px;
  --glass-bg-hover:       rgba(201, 169, 110, 0.06);
  --glass-border-hover:   rgba(201, 169, 110, 0.12);

  /* ─── Accent Shadows (Dark) ─── */
  --k2-shadow-accent:       0 0 20px hsl(39 46% 61% / 0.15), 0 0 40px hsl(39 46% 61% / 0.05);
  --k2-shadow-accent-hover: 0 0 24px hsl(39 46% 61% / 0.25), 0 0 48px hsl(39 46% 61% / 0.1);

  /* ─── Sheet Overlay Tokens (Dark) ─── */
  --shadow-sheet:             -8px 0 32px rgba(0, 0, 0, 0.45), -2px 0 8px rgba(0, 0, 0, 0.35);
  --shadow-card-sheet:        0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-card-sheet-hover:  0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.45);
  --sheet-glass-bg:           rgba(28, 26, 23, 0.82);
  --sheet-glass-border:       rgba(201, 169, 110, 0.10);
  --sheet-glass-blur:         24px;
}


/* ═══════════════════════════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS — LIGHT THEME
   Café: Terracotta #C47D5A auf Cream #F5F0E8
   Sidebar + Topbar: #EDE6D8
   ═══════════════════════════════════════════════════════════ */
html.light {
  /* ─── Surface Colors (warm light, Café) ─── */
  --background:           37 39% 94%;       /* #F5F0E8 Cream */
  --foreground:           30 20% 18%;       /* warmes Dunkel */
  --card:                 38 35% 96%;
  --card-foreground:      30 20% 18%;
  --popover:              38 35% 96%;
  --popover-foreground:   30 20% 18%;

  /* ─── Interactive Colors ─── */
  --primary:              20 47% 56%;       /* Terracotta #C47D5A */
  --primary-foreground:   0 0% 100%;
  --secondary:            38 25% 88%;
  --secondary-foreground: 30 20% 18%;
  --muted:                38 20% 86%;
  --muted-foreground:     30 12% 42%;
  --accent:               38 25% 88%;
  --accent-foreground:    30 20% 18%;

  /* ─── Status Colors ─── */
  --destructive:            8 70% 48%;
  --destructive-foreground: 0 0% 98%;
  --success:                142 76% 36%;
  --info:                   217 91% 60%;
  --warning:                45 93% 47%;

  /* ─── Border & Input ─── */
  --border:  36 20% 84%;
  --input:   36 20% 84%;
  --ring:    20 47% 56%;                    /* Terracotta */

  /* ─── Brand Accent ─── */
  --gold:                 20 47% 56%;       /* Terracotta */
  --gold-foreground:      0 0% 100%;

  /* ─── Status-Akzente (Light) ─── */
  --status-error:         0 72% 51%;
  --status-success:       142 70% 45%;
  --status-success-strong: 142 76% 36%;
  --status-warning:       38 92% 50%;
  --status-info:          217 91% 60%;

  /* ─── Terra-Skala: in Light Mode bleibt es echt Terracotta ─── */
  --k2-terra-hsl-400: 20 47% 56%;
  --k2-terra-hsl-500: 20 47% 46%;
  --k2-terra-50:  hsl(20 47% 95%);
  --k2-terra-100: hsl(20 47% 88%);
  --k2-terra-200: hsl(20 47% 78%);
  --k2-terra-300: hsl(20 47% 68%);
  --k2-terra-400: hsl(20 47% 56%);
  --k2-terra-500: hsl(20 47% 46%);
  --k2-terra-600: hsl(20 47% 36%);
  --k2-terra-700: hsl(20 47% 28%);
  --k2-terra-800: hsl(20 47% 20%);
  --k2-terra-900: hsl(20 47% 14%);

  /* ─── Sidebar (Light — #EDE6D8) ─── */
  --sidebar-bg:           hsl(40 37% 89% / 0.9);
  --sidebar-border:       rgba(196, 125, 90, 0.12);
  --sidebar-text:         rgba(46, 37, 29, 0.6);
  --sidebar-text-active:  hsl(20 47% 56%);
  --sidebar-hover:        rgba(196, 125, 90, 0.06);
  --sidebar-active-bg:    hsl(20 47% 56% / 0.1);

  /* ─── Glass Effect (Light) ─── */
  --glass-bg:             rgba(255, 255, 255, 0.6);
  --glass-border:         rgba(196, 125, 90, 0.1);
  --glass-blur:           40px;
  --glass-bg-hover:       rgba(255, 255, 255, 0.8);
  --glass-border-hover:   rgba(196, 125, 90, 0.18);

  /* ─── Accent Shadows (Light) ─── */
  --k2-shadow-accent:       0 0 20px hsl(20 47% 56% / 0.12), 0 0 40px hsl(20 47% 56% / 0.04);
  --k2-shadow-accent-hover: 0 0 24px hsl(20 47% 56% / 0.2), 0 0 48px hsl(20 47% 56% / 0.08);

  /* ─── Sheet Overlay Tokens (Light) ─── */
  --shadow-sheet:             -8px 0 32px rgba(78, 47, 28, 0.12), -2px 0 8px rgba(78, 47, 28, 0.08);
  --shadow-card-sheet:        0 4px 24px rgba(78, 47, 28, 0.08), 0 1px 3px rgba(78, 47, 28, 0.06);
  --shadow-card-sheet-hover:  0 8px 32px rgba(78, 47, 28, 0.12), 0 2px 6px rgba(78, 47, 28, 0.08);
  --sheet-glass-bg:           rgba(245, 240, 232, 0.82);
  --sheet-glass-border:       rgba(196, 125, 90, 0.14);
  --sheet-glass-blur:         24px;
}


/* ═══════════════════════════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS — SAGE THEME (hell, warm — wie Light)
   Frisch & natürlich: Salbei #6B8E5E auf Cream #F5F0E8
   ═══════════════════════════════════════════════════════════ */
html.theme-sage {
  --background:           37 39% 94%;        /* gleicher Cream wie Light */
  --foreground:           30 20% 18%;
  --card:                 38 35% 96%;
  --card-foreground:      30 20% 18%;
  --popover:              38 35% 96%;
  --popover-foreground:   30 20% 18%;
  --primary:              105 23% 45%;       /* Sage Green */
  --primary-foreground:   0 0% 100%;
  --secondary:            38 25% 88%;
  --secondary-foreground: 30 20% 18%;
  --muted:                38 20% 86%;
  --muted-foreground:     30 12% 42%;
  --accent:               38 25% 88%;
  --accent-foreground:    30 20% 18%;
  --destructive:          8 70% 48%;
  --destructive-foreground: 0 0% 98%;
  --success:              142 76% 36%;
  --info:                 217 91% 60%;
  --warning:              45 93% 47%;
  --border:               36 20% 84%;
  --input:                36 20% 84%;
  --ring:                 105 23% 45%;
  --gold:                 105 23% 45%;       /* Sage statt Terracotta */
  --gold-foreground:      0 0% 100%;
  --k2-terra-hsl-400: 105 23% 45%;
  --k2-terra-hsl-500: 105 23% 38%;
  --k2-terra-50:  hsl(105 23% 95%);
  --k2-terra-100: hsl(105 23% 88%);
  --k2-terra-200: hsl(105 23% 78%);
  --k2-terra-300: hsl(105 23% 65%);
  --k2-terra-400: hsl(105 23% 45%);
  --k2-terra-500: hsl(105 23% 38%);
  --k2-terra-600: hsl(105 23% 30%);
  --k2-terra-700: hsl(105 23% 24%);
  --k2-terra-800: hsl(105 23% 18%);
  --k2-terra-900: hsl(105 23% 12%);
  --status-error:         0 72% 51%;
  --status-success:       142 70% 45%;
  --status-success-strong: 142 76% 36%;
  --status-warning:       38 92% 50%;
  --status-info:          217 91% 60%;
  --sidebar-bg:           hsl(40 37% 89% / 0.9);
  --sidebar-border:       rgba(107, 142, 94, 0.14);
  --sidebar-text:         rgba(46, 37, 29, 0.6);
  --sidebar-text-active:  hsl(105 23% 45%);
  --sidebar-hover:        rgba(107, 142, 94, 0.07);
  --sidebar-active-bg:    hsl(105 23% 45% / 0.1);
  --glass-bg:             rgba(255, 255, 255, 0.6);
  --glass-border:         rgba(107, 142, 94, 0.12);
  --glass-blur:           40px;
  --glass-bg-hover:       rgba(255, 255, 255, 0.8);
  --glass-border-hover:   rgba(107, 142, 94, 0.2);
  --k2-shadow-accent:       0 0 20px hsl(105 23% 45% / 0.12), 0 0 40px hsl(105 23% 45% / 0.04);
  --k2-shadow-accent-hover: 0 0 24px hsl(105 23% 45% / 0.2), 0 0 48px hsl(105 23% 45% / 0.08);
  --shadow-sheet:             -8px 0 32px rgba(48, 64, 38, 0.12), -2px 0 8px rgba(48, 64, 38, 0.08);
  --shadow-card-sheet:        0 4px 24px rgba(48, 64, 38, 0.08), 0 1px 3px rgba(48, 64, 38, 0.06);
  --shadow-card-sheet-hover:  0 8px 32px rgba(48, 64, 38, 0.12), 0 2px 6px rgba(48, 64, 38, 0.08);
  --sheet-glass-bg:           rgba(245, 240, 232, 0.82);
  --sheet-glass-border:       rgba(107, 142, 94, 0.16);
  --sheet-glass-blur:         24px;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS — PLUM THEME (hell, warm — wie Light)
   Elegant & rich: Pflaume #8B4F6F auf Cream #F5F0E8
   ═══════════════════════════════════════════════════════════ */
html.theme-plum {
  --background:           37 39% 94%;
  --foreground:           30 20% 18%;
  --card:                 38 35% 96%;
  --card-foreground:      30 20% 18%;
  --popover:              38 35% 96%;
  --popover-foreground:   30 20% 18%;
  --primary:              330 28% 42%;       /* Plum/Mauve */
  --primary-foreground:   0 0% 100%;
  --secondary:            38 25% 88%;
  --secondary-foreground: 30 20% 18%;
  --muted:                38 20% 86%;
  --muted-foreground:     30 12% 42%;
  --accent:               38 25% 88%;
  --accent-foreground:    30 20% 18%;
  --destructive:          8 70% 48%;
  --destructive-foreground: 0 0% 98%;
  --success:              142 76% 36%;
  --info:                 217 91% 60%;
  --warning:              45 93% 47%;
  --border:               36 20% 84%;
  --input:                36 20% 84%;
  --ring:                 330 28% 42%;
  --gold:                 330 28% 42%;       /* Plum statt Terracotta */
  --gold-foreground:      0 0% 100%;
  --k2-terra-hsl-400: 330 28% 42%;
  --k2-terra-hsl-500: 330 28% 35%;
  --k2-terra-50:  hsl(330 28% 95%);
  --k2-terra-100: hsl(330 28% 88%);
  --k2-terra-200: hsl(330 28% 78%);
  --k2-terra-300: hsl(330 28% 62%);
  --k2-terra-400: hsl(330 28% 42%);
  --k2-terra-500: hsl(330 28% 35%);
  --k2-terra-600: hsl(330 28% 28%);
  --k2-terra-700: hsl(330 28% 22%);
  --k2-terra-800: hsl(330 28% 16%);
  --k2-terra-900: hsl(330 28% 12%);
  --status-error:         0 72% 51%;
  --status-success:       142 70% 45%;
  --status-success-strong: 142 76% 36%;
  --status-warning:       38 92% 50%;
  --status-info:          217 91% 60%;
  --sidebar-bg:           hsl(40 37% 89% / 0.9);
  --sidebar-border:       rgba(139, 79, 111, 0.14);
  --sidebar-text:         rgba(46, 37, 29, 0.6);
  --sidebar-text-active:  hsl(330 28% 42%);
  --sidebar-hover:        rgba(139, 79, 111, 0.07);
  --sidebar-active-bg:    hsl(330 28% 42% / 0.1);
  --glass-bg:             rgba(255, 255, 255, 0.6);
  --glass-border:         rgba(139, 79, 111, 0.12);
  --glass-blur:           40px;
  --glass-bg-hover:       rgba(255, 255, 255, 0.8);
  --glass-border-hover:   rgba(139, 79, 111, 0.2);
  --k2-shadow-accent:       0 0 20px hsl(330 28% 42% / 0.12), 0 0 40px hsl(330 28% 42% / 0.04);
  --k2-shadow-accent-hover: 0 0 24px hsl(330 28% 42% / 0.2), 0 0 48px hsl(330 28% 42% / 0.08);
  --shadow-sheet:             -8px 0 32px rgba(78, 47, 60, 0.12), -2px 0 8px rgba(78, 47, 60, 0.08);
  --shadow-card-sheet:        0 4px 24px rgba(78, 47, 60, 0.08), 0 1px 3px rgba(78, 47, 60, 0.06);
  --shadow-card-sheet-hover:  0 8px 32px rgba(78, 47, 60, 0.12), 0 2px 6px rgba(78, 47, 60, 0.08);
  --sheet-glass-bg:           rgba(245, 240, 232, 0.82);
  --sheet-glass-border:       rgba(139, 79, 111, 0.16);
  --sheet-glass-blur:         24px;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS — OCEAN THEME (hell, warm — wie Light)
   Cool aber warm: Petrol-Blau #316582 auf Cream #F5F0E8
   ═══════════════════════════════════════════════════════════ */
html.theme-ocean {
  --background:           37 39% 94%;
  --foreground:           30 20% 18%;
  --card:                 38 35% 96%;
  --card-foreground:      30 20% 18%;
  --popover:              38 35% 96%;
  --popover-foreground:   30 20% 18%;
  --primary:              200 47% 35%;       /* Deep Petrol Blue */
  --primary-foreground:   0 0% 100%;
  --secondary:            38 25% 88%;
  --secondary-foreground: 30 20% 18%;
  --muted:                38 20% 86%;
  --muted-foreground:     30 12% 42%;
  --accent:               38 25% 88%;
  --accent-foreground:    30 20% 18%;
  --destructive:          8 70% 48%;
  --destructive-foreground: 0 0% 98%;
  --success:              142 76% 36%;
  --info:                 217 91% 60%;
  --warning:              45 93% 47%;
  --border:               36 20% 84%;
  --input:                36 20% 84%;
  --ring:                 200 47% 35%;
  --gold:                 200 47% 35%;       /* Petrol statt Terracotta */
  --gold-foreground:      0 0% 100%;
  --k2-terra-hsl-400: 200 47% 35%;
  --k2-terra-hsl-500: 200 47% 28%;
  --k2-terra-50:  hsl(200 47% 95%);
  --k2-terra-100: hsl(200 47% 88%);
  --k2-terra-200: hsl(200 47% 75%);
  --k2-terra-300: hsl(200 47% 55%);
  --k2-terra-400: hsl(200 47% 35%);
  --k2-terra-500: hsl(200 47% 28%);
  --k2-terra-600: hsl(200 47% 22%);
  --k2-terra-700: hsl(200 47% 18%);
  --k2-terra-800: hsl(200 47% 14%);
  --k2-terra-900: hsl(200 47% 10%);
  --status-error:         0 72% 51%;
  --status-success:       142 70% 45%;
  --status-success-strong: 142 76% 36%;
  --status-warning:       38 92% 50%;
  --status-info:          217 91% 60%;
  --sidebar-bg:           hsl(40 37% 89% / 0.9);
  --sidebar-border:       rgba(49, 101, 130, 0.14);
  --sidebar-text:         rgba(46, 37, 29, 0.6);
  --sidebar-text-active:  hsl(200 47% 35%);
  --sidebar-hover:        rgba(49, 101, 130, 0.07);
  --sidebar-active-bg:    hsl(200 47% 35% / 0.1);
  --glass-bg:             rgba(255, 255, 255, 0.6);
  --glass-border:         rgba(49, 101, 130, 0.12);
  --glass-blur:           40px;
  --glass-bg-hover:       rgba(255, 255, 255, 0.8);
  --glass-border-hover:   rgba(49, 101, 130, 0.2);
  --k2-shadow-accent:       0 0 20px hsl(200 47% 35% / 0.12), 0 0 40px hsl(200 47% 35% / 0.04);
  --k2-shadow-accent-hover: 0 0 24px hsl(200 47% 35% / 0.2), 0 0 48px hsl(200 47% 35% / 0.08);
  --shadow-sheet:             -8px 0 32px rgba(28, 50, 64, 0.12), -2px 0 8px rgba(28, 50, 64, 0.08);
  --shadow-card-sheet:        0 4px 24px rgba(28, 50, 64, 0.08), 0 1px 3px rgba(28, 50, 64, 0.06);
  --shadow-card-sheet-hover:  0 8px 32px rgba(28, 50, 64, 0.12), 0 2px 6px rgba(28, 50, 64, 0.08);
  --sheet-glass-bg:           rgba(245, 240, 232, 0.82);
  --sheet-glass-border:       rgba(49, 101, 130, 0.16);
  --sheet-glass-blur:         24px;
}


/* ═══════════════════════════════════════════════════════════
   LAYER 3: COMPONENT TOKENS
   Per-component customization referencing semantic layer.
   ═══════════════════════════════════════════════════════════ */
:root {

  /* ─── Button ─── */
  --btn-gold-bg:          hsl(var(--gold));
  --btn-gold-fg:          hsl(var(--gold-foreground));
  --btn-gold-hover:       hsl(39 46% 54%);      /* Champagner etwas dunkler */
  --btn-gold-shadow:      var(--k2-shadow-accent);
  --btn-gold-shadow-hover: var(--k2-shadow-accent-hover);
  --btn-height:           2.25rem;
  --btn-height-sm:        2rem;
  --btn-height-lg:        2.75rem;
  --btn-radius:           var(--k2-radius-md);
  --btn-font:             var(--k2-text-base);
  --btn-font-sm:          var(--k2-text-xs);
  --btn-weight:           var(--k2-weight-medium);

  /* ─── Card ─── */
  --card-bg:              hsl(var(--card));
  --card-border:          hsl(var(--border));
  --card-radius:          var(--k2-radius-base);
  --card-padding:         var(--k2-space-6);
  --card-shadow:          var(--k2-shadow-xs);
  --card-lift-y:          -2px;
  --card-lift-shadow:     0 8px 24px rgb(0 0 0 / 0.15);

  /* ─── Glass Card ─── */
  --glass-card-bg:        var(--glass-bg);
  --glass-card-border:    var(--glass-border);
  --glass-card-blur:      var(--glass-blur);
  --glass-card-radius:    var(--k2-radius-lg);

  /* ─── Badge ─── */
  --badge-radius:         var(--k2-radius-full);
  --badge-padding:        0.125rem 0.625rem;
  --badge-font:           var(--k2-text-xs);
  --badge-weight:         var(--k2-weight-semibold);

  /* ─── Input ─── */
  --input-height:         2.25rem;
  --input-radius:         var(--k2-radius-md);
  --input-border:         hsl(var(--input));
  --input-bg:             hsl(var(--background));
  --input-font:           var(--k2-text-base);
  --input-focus-ring:     hsl(var(--ring) / 0.1);
  --input-focus-border:   hsl(var(--ring) / 0.4);

  /* ─── Table ─── */
  --table-header-font:    var(--k2-text-xs);
  --table-header-weight:  var(--k2-weight-medium);
  --table-header-spacing: var(--k2-tracking-wider);
  --table-cell-padding:   0.75rem 1rem;
  --table-row-hover:      hsl(var(--muted) / 0.5);

  /* ─── Avatar ─── */
  --avatar-size-sm:       1.5rem;
  --avatar-size:          2rem;
  --avatar-size-lg:       3rem;
  --avatar-size-xl:       4rem;
  --avatar-radius:        var(--k2-radius-full);
  --avatar-font:          var(--k2-text-xs);
  --avatar-weight:        var(--k2-weight-semibold);

  /* ─── Sidebar ─── */
  --sb-pill-radius:       50px;
  --sb-pill-padding:      8px 14px;
  --sb-pill-icon-size:    28px;
  --sb-item-radius:       8px;
  --sb-item-padding:      7px 12px;
  --sb-item-font:         var(--k2-text-sm);
  --sb-section-font:      10px;
  --sb-section-weight:    var(--k2-weight-semibold);
  --sb-section-spacing:   var(--k2-tracking-widest);

  /* ─── Toast ─── */
  --toast-radius:         var(--k2-radius-base);
  --toast-shadow:         0 4px 12px rgb(0 0 0 / 0.3);
  --toast-border-accent:  3px;
  --toast-min-width:      16rem;

  /* ─── Popover ─── */
  --popover-radius:       var(--k2-radius-base);
  --popover-shadow:       0 10px 25px -5px rgb(0 0 0 / 0.4);
  --popover-width:        18rem;
}

html.light {
  --btn-gold-hover:       hsl(20 47% 48%);      /* Terracotta etwas dunkler */
  --card-lift-shadow:     0 8px 24px rgb(0 0 0 / 0.08);
  --toast-shadow:         0 4px 12px rgb(0 0 0 / 0.1);
  --popover-shadow:       0 10px 25px -5px rgb(0 0 0 / 0.12);
}


/* ═══════════════════════════════════════════════════════════
   EFFECTS & ANIMATIONS
   Reusable effect classes for all portals.
   ═══════════════════════════════════════════════════════════ */

/* ─── Glassmorphism ─── */
.k2-glass {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  backdrop-filter: blur(var(--glass-card-blur));
  -webkit-backdrop-filter: blur(var(--glass-card-blur));
  border-radius: var(--glass-card-radius);
}
.k2-glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

/* ─── Accent Glow ─── */
.k2-glow {
  box-shadow: var(--k2-shadow-accent);
}
.k2-glow-hover {
  transition: box-shadow var(--k2-duration-slow) var(--k2-ease-default);
}
.k2-glow-hover:hover {
  box-shadow: var(--k2-shadow-accent-hover);
}

/* ─── Card Lift ─── */
.k2-card-lift {
  transition: transform var(--k2-duration-slower) var(--k2-ease-default),
              box-shadow var(--k2-duration-slower) var(--k2-ease-default);
}
.k2-card-lift:hover {
  transform: translateY(var(--card-lift-y));
  box-shadow: var(--card-lift-shadow);
}

/* ─── Ripple Button ─── */
.k2-ripple {
  position: relative;
  overflow: hidden;
}
.k2-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}
.k2-ripple:active::after {
  transform: scale(2.5);
  opacity: 1;
  transition: 0s;
}

/* ─── Wave Bars (Audio Visualization) ─── */
@keyframes k2-wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}
.k2-wave-bar {
  width: 3px;
  border-radius: var(--k2-radius-full);
  background: linear-gradient(
    to top,
    hsl(var(--gold) / 0.4),
    hsl(var(--gold))
  );
  animation: k2-wave 1.2s ease-in-out infinite;
}
.k2-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.k2-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.k2-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.k2-wave-bar:nth-child(5) { animation-delay: 0.4s; }
.k2-wave-bar:nth-child(6) { animation-delay: 0.5s; }
.k2-wave-bar:nth-child(7) { animation-delay: 0.6s; }
.k2-wave-bar:nth-child(8) { animation-delay: 0.7s; }

/* ─── Skeleton Loading ─── */
@keyframes k2-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.k2-skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 25%,
    hsl(var(--muted) / 0.5) 50%,
    hsl(var(--muted)) 75%
  );
  background-size: 200% 100%;
  animation: k2-shimmer 1.5s infinite;
  border-radius: var(--k2-radius-md);
}

/* ─── Page Entrance ─── */
@keyframes k2-page-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.k2-page-in {
  animation: k2-page-in var(--k2-duration-slow) var(--k2-ease-out);
}

/* ─── Stagger Rows ─── */
@keyframes k2-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.k2-stagger {
  animation: k2-stagger-in var(--k2-duration-slower) var(--k2-ease-out) backwards;
}

/* ─── Gradient Icon Circle (Stat Cards) ─── */
.k2-icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: var(--k2-radius-xl);
  background: linear-gradient(
    135deg,
    hsl(var(--gold) / 0.2),
    hsl(var(--gold) / 0.08)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--gold));
}

/* ─── Gradient Progress Bar ─── */
.k2-progress {
  height: 0.5rem;
  background: hsl(var(--muted));
  border-radius: var(--k2-radius-full);
  overflow: hidden;
}
.k2-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    hsl(var(--gold)),
    hsl(var(--gold) / 0.6)
  );
  border-radius: var(--k2-radius-full);
  transition: width var(--k2-duration-slowest) var(--k2-ease-default);
}

/* ─── Status Dots ─── */
.k2-status-online {
  background: hsl(142 71% 45%);
  box-shadow: 0 0 8px hsl(142 71% 45% / 0.5);
}
.k2-status-away {
  background: hsl(45 93% 47%);
  box-shadow: 0 0 8px hsl(45 93% 47% / 0.5);
}
.k2-status-offline {
  background: hsl(var(--muted));
}

/* ─── Scrollbar ─── */
.k2-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.k2-scrollbar::-webkit-scrollbar-track { background: transparent; }
.k2-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 2px;
}
.k2-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}


/* ═══════════════════════════════════════════════════════════
   UX/UI UTILITIES
   Sidebar Indicator, Focus Glow, Reduced Motion, Elevation,
   Theme Transition, Empty States, Pulse, Selected Rows
   ═══════════════════════════════════════════════════════════ */

/* ─── Theme Transition (smooth Dark↔Light) ─── */
body,
body * {
  transition-property: background-color, border-color, color, box-shadow, opacity;
  transition-duration: 0s; /* Default: instant */
}
html.theme-transitioning body,
html.theme-transitioning body * {
  transition-duration: 300ms !important;
  transition-timing-function: var(--k2-ease-default) !important;
}

/* ─── Elevation System (z-1, z-2, z-3) ─── */
.k2-elevation-1 {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--k2-shadow-xs);
}
.k2-elevation-2 {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--k2-shadow-sm);
}
.k2-elevation-3 {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--k2-shadow-lg);
}

/* ─── Sidebar Active Indicator ─── */
.k2-sidebar-indicator {
  position: relative;
}
.k2-sidebar-indicator::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 var(--k2-radius-sm) var(--k2-radius-sm) 0;
  background: hsl(var(--gold));
  opacity: 0;
  transition: opacity var(--k2-duration-normal) var(--k2-ease-default);
}
.k2-sidebar-indicator.active::before {
  opacity: 1;
}

/* ─── Input Focus Glow ─── */
.k2-input-glow:focus {
  border-color: hsl(var(--gold) / 0.5);
  box-shadow:
    0 0 0 2px hsl(var(--gold) / 0.1),
    0 0 12px hsl(var(--gold) / 0.08);
  outline: none;
}

/* ─── Table Selected Row ─── */
.k2-row-selected {
  position: relative;
  background: hsl(var(--gold) / 0.04) !important;
}
.k2-row-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--gold));
  border-radius: 0 2px 2px 0;
}

/* ─── Card Hover Border Transition ─── */
.k2-card-border-hover {
  border: 1px solid hsl(var(--border));
  transition: border-color var(--k2-duration-normal) var(--k2-ease-default);
}
.k2-card-border-hover:hover {
  border-color: hsl(var(--gold) / 0.3);
}

/* ─── Pulse Animation (Live Indicators) ─── */
@keyframes k2-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.k2-pulse {
  animation: k2-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ─── Avatar Online Pulse ─── */
@keyframes k2-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(142 71% 45% / 0.4); }
  50% { box-shadow: 0 0 0 4px hsl(142 71% 45% / 0); }
}
.k2-status-online-pulse {
  background: hsl(142 71% 45%);
  animation: k2-status-pulse 2s ease-in-out infinite;
}

/* ─── Empty State ─── */
.k2-empty-state {
  text-align: center;
  padding: var(--k2-space-16) var(--k2-space-8);
}
.k2-empty-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--k2-space-4);
  border-radius: var(--k2-radius-full);
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}
.k2-empty-title {
  font-size: var(--k2-text-md);
  font-weight: var(--k2-weight-semibold);
  margin-bottom: var(--k2-space-1);
}
.k2-empty-desc {
  font-size: var(--k2-text-base);
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--k2-space-4);
}

/* ─── Focus Ring (Global, Accessible) ─── */
.k2-focus-ring:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px hsl(var(--gold) / 0.1);
}

/* ─── List Item Hover (Background Fade) ─── */
.k2-list-hover {
  transition: background-color var(--k2-duration-fast) var(--k2-ease-out);
}
.k2-list-hover:hover {
  background: hsl(var(--muted) / 0.5);
}

/* ─── Section Label (Consistent Typography) ─── */
.k2-section-label {
  font-size: 11px;
  font-weight: var(--k2-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--k2-tracking-wider);
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--k2-space-3);
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .k2-wave-bar { animation: none !important; }
  .k2-pulse { animation: none !important; }
  .k2-status-online-pulse { animation: none !important; }
  .k2-card-lift:hover { transform: none !important; }
  .k2-ripple::after { display: none !important; }
}