/* ═══════════════════════════════════════════════════════════════════════════
   BC Toolkit — Design Tokens (v20, Liquid-Glass-Redesign)
   Single source of truth. Alle UI-Werte werden von hier referenziert.
   Quelle: bubbbly.com/app/github-glass-badge.html (Liquid-Glass-Referenz)
   — weißes Glas auf scharfem Foto, Plus Jakarta Sans, große Radien, Pills.
   Token-NAMEN sind historisch (Gold/Bone-Ära) und bleiben aus Kompatibilität
   bestehen — die WERTE definieren den neuen Look: --gold ist jetzt Weiß
   (Akzent = Weiß), --bone ist reines Weiß, --glass-bg ist weißes Glas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Farben: Neutrale (Basis hinter dem Foto) ────────────────────────── */
  --void:         #000000;  /* tiefstes Schwarz, Basis-BG */
  --ink:          #06080d;  /* Page-BG (sichtbar nur ohne Foto) */
  --smoke-deep:   #101725;  /* opake Fallback-Flächen (Dropdowns o. Blur) */
  --smoke:        #141c2c;
  --smoke-mid:    #1b2435;
  --smoke-high:   #243046;

  /* ─── Akzent (historisch "Gold") — Akzentfarbe ist jetzt WEISS ────────── */
  --gold-deep:    rgba(255, 255, 255, 0.55);
  --gold:         #ffffff;
  --gold-warm:    #ffffff;
  --gold-bright:  #ffffff;

  /* Primär-Flächen (weiße Pills) — historischer Name, neuer Wert */
  --gradient-gold:      linear-gradient(180deg, #ffffff 0%, #f2f5f9 100%);
  --gradient-gold-soft: linear-gradient(180deg, #ffffff 0%, #f2f5f9 100%);

  /* Das echte Brand-Gold — NUR für .brand-logo / Logo-Masken, nicht für UI */
  --gradient-brand-gold: linear-gradient(135deg, #D9BD89 0%, #B89668 50%, #8B7045 100%);

  /* ─── Text (historisch "Bone") ────────────────────────────────────────── */
  --bone:         #ffffff;                    /* Haupt-Textfarbe */
  --bone-dim:     rgba(255, 255, 255, 0.85);  /* Sekundär-Text */

  /* ─── Mute-Töne (historisch "Ash") ────────────────────────────────────── */
  --ash:          rgba(255, 255, 255, 0.70);  /* Labels, Hint-Text */
  --ash-mid:      rgba(255, 255, 255, 0.50);  /* Deaktivierte Elemente */
  --ash-deep:     rgba(255, 255, 255, 0.28);  /* Subtile Divider */

  /* ─── Semantik: Status — hell, auf Glas lesbar ────────────────────────── */
  --error:        #ff8a78;
  --error-dim:    rgba(255, 120, 102, 0.16);
  --success:      #8ce2a2;
  --success-dim:  rgba(64, 196, 99, 0.18);
  --warn:         #ffb868;
  --warn-dim:     rgba(255, 177, 77, 0.16);
  --info:         #8cc7f5;
  --info-dim:     rgba(140, 199, 245, 0.16);
  --on-gold:      #0f1a2a;  /* dunkler Navy-Text auf weißen Pills/Flächen */
  --on-accent:    #0f1a2a;  /* Alias, semantisch korrekt benannt */

  /* ─── Client-Farben (Videolink-Kalender) — helle Pastelle ─────────────── */
  --client-1: #ffd28a;  /* Aprikose */
  --client-2: #9be9a8;  /* Mint */
  --client-3: #8cc7f5;  /* Himmel */
  --client-4: #ff9d8a;  /* Koralle */
  --client-5: #d3b5ff;  /* Lavendel */
  --client-6: #8ae8e0;  /* Aqua */
  --client-7: #f5e08a;  /* Sand */
  --client-8: #c6e88a;  /* Limette */

  /* ─── Liquid Glass (weißes Glas, 1:1 Bubbbly-Rezept) ──────────────────── */
  --glass-bg:          rgba(255, 255, 255, 0.10);
  --glass-bg-strong:   rgba(255, 255, 255, 0.16);   /* Modals, Dropdowns */
  --glass-blur:        blur(22px) saturate(1.2);
  --glass-blur-strong: blur(28px) saturate(1.25);
  --glass-border:      1px solid rgba(255, 255, 255, 0.30);
  --glass-hairline:    1px solid rgba(255, 255, 255, 0.30);

  /* Raw rgba für feine Linien (historische Namen, weiße Werte) */
  --hairline-gold:        rgba(255, 255, 255, 0.30);  /* Divider, Separatoren */
  --hairline-gold-weak:   rgba(255, 255, 255, 0.14);  /* Listen-Divider */
  --hairline-gold-glow:   rgba(255, 255, 255, 0.45);  /* starke Kanten */
  --hairline-ash:         rgba(255, 255, 255, 0.18);  /* neutrale Begrenzung */
  --hairline-bone:        rgba(255, 255, 255, 0.22);
  --hairline-bone-weak:   rgba(255, 255, 255, 0.12);

  /* Inneres Panel (Card-in-Glas): Fläche + Border — KEIN eigener Blur */
  --surface-flat:    rgba(255, 255, 255, 0.07);
  --surface-border:  rgba(255, 255, 255, 0.45);
  --scrim-modal:     rgba(6, 10, 16, 0.45);

  /* Eingabefelder (Glas-Pills) */
  --glass-field-bg:           rgba(255, 255, 255, 0.06);
  --glass-field-blur:         blur(12px) saturate(1.1);
  --glass-field-border:       rgba(255, 255, 255, 0.45);
  --glass-field-border-focus: rgba(255, 255, 255, 0.85);
  --glass-field-bg-focus:     rgba(255, 255, 255, 0.12);

  /* Toggle-Knopf Sidebar */
  --glass-toggle-bg:       rgba(255, 255, 255, 0.10);
  --glass-toggle-bg-hover: rgba(255, 255, 255, 0.18);

  /* ─── Typografie — Plus Jakarta Sans, überall ─────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-ui:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* Font-Sizes */
  --fs-micro:  11px;  /* Tags, Badges */
  --fs-xs:     12px;  /* Eyebrows, Mini-Labels */
  --fs-sm:     13px;  /* Small UI, Mini-Pills */
  --fs-body:   14px;  /* Body, Labels */
  --fs-md:     15px;  /* Input-Text, Buttons */
  --fs-lg:     17px;
  --fs-xl:     22px;  /* Sidebar-Brand, Panel-H1 */
  --fs-hero:   clamp(28px, 2.8vw, 42px);  /* Hero-Display */

  /* Font-Weights — Referenz kennt kein Light: alles 500–800 */
  --fw-light:   500;
  --fw-regular: 500;
  --fw-medium:  600;
  --fw-semi:    700;
  --fw-bold:    800;

  /* Letter-Spacing — praktisch null; Tracking nur auf Mini-Eyebrows */
  --ls-tight:    0;
  --ls-normal:   0;
  --ls-subtle:   0.01em;
  --ls-wide:     0.02em;
  --ls-wider:    0.04em;
  --ls-eyebrow:  0.16em;   /* 12px-Eyebrows (≈2px, wie "SIGNATURE" in Referenz) */
  --ls-caps:     0.16em;   /* historischer Name, gleicher Eyebrow-Wert */
  --ls-caps-xl:  0.16em;

  /* Line-Heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-body:   1.45;

  /* ─── Spacing (4px Grid) ──────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  /* ─── Radius (Liquid Glass — groß und weich) ──────────────────────────── */
  --radius-xs: 12px;     /* kleine Chips, Credit-Tiles */
  --radius-sm: 14px;     /* kleine Buttons/Controls, die kein Pill sind */
  --radius-md: 16px;     /* innere Cards, Sekundär-Buttons, Textareas */
  --radius-lg: 26px;     /* große Glas-Panels, Modals, Sidebar */
  --radius-xl: 34px;     /* Feature-Cards (wie das GitHub-Card der Referenz) */
  --radius-pill: 9999px; /* Pills: Inputs, Primär-Buttons, Filter-Chips */
  --radius-round: 50%;

  /* ─── Schatten & Elevation (1:1 Referenz) ─────────────────────────────── */
  --shadow-glass:   0 24px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --shadow-pill:    0 8px 22px rgba(0, 0, 0, 0.18);   /* weißer Primär-Pill */
  --shadow-cta:     0 10px 26px rgba(0, 0, 0, 0.22);  /* großer weißer CTA */
  --shadow-inset-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --shadow-inset-bottom:    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  --glow-gold:      none;  /* Glow-Ästhetik existiert im Liquid-Look nicht */
  --glow-gold-soft: none;
  --glow-brand:     drop-shadow(0 0 8px rgba(184, 150, 104, 0.22)); /* nur Logo */

  /* ─── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear:   linear;
  --ease-base:     ease;

  --dur-instant:  120ms;  /* Button-Hovers (Referenz: 0.12s) */
  --dur-fast:     150ms;  /* Glas-BG-Hovers (Referenz: 0.15s) */
  --dur-base:     220ms;
  --dur-med:      280ms;
  --dur-slow:     340ms;
  --dur-xslow:    420ms;  /* Sidebar Open/Close */

  /* ─── Layout ──────────────────────────────────────────────────────────── */
  --sidebar-w:         64px;
  --sidebar-expanded:  236px;
  --sidebar-inset:     12px;   /* Sidebar schwebt: Abstand zu Viewport-Kanten */

  --field-height:   46px;  /* Glas-Pill-Inputs (Referenz: 46px) */
  --button-height:  46px;  /* Primär-Pills */
  --cta-height:     50px;  /* große CTAs */

  /* Nav-Geometrie */
  --sidebar-brand-h:    88px;
  --nav-item-height:    44px;
  --nav-group-gap:      36px;

  /* Content-Layout */
  --main-padding-top:   96px;
  --main-padding-x:     120px;
  --main-padding-bot:   120px;
  --main-max-width:     1320px;   /* legacy — kept for compat */
  --main-track-w:       1200px;   /* Centered content track (desktop) */
  --hero-max-width:     640px;
  --search-max-width:   720px;
  --archive-max-width:  920px;

  /* Legacy-Font-Aliase */
  --f-display: var(--font-display);
  --f-ui:      var(--font-ui);

  /* ─── Backgrounds / Assets ────────────────────────────────────────────── */
  /* Default-Hintergrund "Aurora": abstrakte Leuchtflächen auf Navy als
     Inline-SVG (Data-URI) — null Netzwerk-Requests, skaliert verlustfrei.
     Austauschbar: bg.js überschreibt diese Variable zur Laufzeit auf :root
     (localStorage 'bc:bg'). */
  --asset-hero-bg:  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1600 900%27 preserveAspectRatio=%27xMidYMid slice%27%3E%3Cdefs%3E%3ClinearGradient id=%27base%27 x1=%270%27 y1=%270%27 x2=%270.4%27 y2=%271%27%3E%3Cstop offset=%270%27 stop-color=%27%23070b14%27/%3E%3Cstop offset=%270.55%27 stop-color=%27%230a1322%27/%3E%3Cstop offset=%271%27 stop-color=%27%230d1b2e%27/%3E%3C/linearGradient%3E%3CradialGradient id=%27a1%27 cx=%270.5%27 cy=%270.5%27 r=%270.5%27%3E%3Cstop offset=%270%27 stop-color=%27%232563a8%27 stop-opacity=%270.55%27/%3E%3Cstop offset=%271%27 stop-color=%27%232563a8%27 stop-opacity=%270%27/%3E%3C/radialGradient%3E%3CradialGradient id=%27a2%27 cx=%270.5%27 cy=%270.5%27 r=%270.5%27%3E%3Cstop offset=%270%27 stop-color=%27%232e9db5%27 stop-opacity=%270.36%27/%3E%3Cstop offset=%271%27 stop-color=%27%232e9db5%27 stop-opacity=%270%27/%3E%3C/radialGradient%3E%3CradialGradient id=%27a3%27 cx=%270.5%27 cy=%270.5%27 r=%270.5%27%3E%3Cstop offset=%270%27 stop-color=%27%23b7d3ee%27 stop-opacity=%270.26%27/%3E%3Cstop offset=%271%27 stop-color=%27%23b7d3ee%27 stop-opacity=%270%27/%3E%3C/radialGradient%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3C/defs%3E%3Crect width=%271600%27 height=%27900%27 fill=%27url(%23base)%27/%3E%3Cellipse cx=%27380%27 cy=%27680%27 rx=%27750%27 ry=%27420%27 fill=%27url(%23a1)%27/%3E%3Cellipse cx=%271250%27 cy=%27230%27 rx=%27680%27 ry=%27380%27 fill=%27url(%23a2)%27/%3E%3Cellipse cx=%27850%27 cy=%2790%27 rx=%27500%27 ry=%27260%27 fill=%27url(%23a3)%27/%3E%3Crect width=%271600%27 height=%27900%27 filter=%27url(%23n)%27 opacity=%270.05%27/%3E%3C/svg%3E");
  /* Nur als Alpha-Maske genutzt (.brand-logo) — WebP, halbe Kantenlänge,
     ?v= für immutable-Caching. Original-PNG bleibt als Quelle in Assets/. */
  --asset-logo:     url('/Assets/logo-mask.webp?v=1');
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utility-Klassen — nur die, die überall gebraucht werden.
   Komponenten-Styling gehört in die jeweilige Komponenten-CSS, nicht hier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mini-Eyebrow (einzige erlaubte Uppercase-Stimme, wie "SIGNATURE") */
.text-caps {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bone-dim);
}

.text-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--bone);
}

/* Großes Liquid-Glass-Panel (1:1 Bubbbly-Rezept) */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

/* Primär-CTA — weißer Pill mit Navy-Text (historischer Name .btn-gold) */
.btn-gold {
  background: var(--gradient-gold);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 22px;
  height: var(--button-height);
  color: var(--on-gold);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-transform: none;
  cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-base),
              box-shadow var(--dur-instant) var(--ease-base);
  box-shadow: var(--shadow-pill);
}
.btn-gold:hover  { transform: translateY(-1px); }
.btn-gold:active { transform: translateY(1px); }

/* Brand-Logo als <span class="brand-logo"></span> — bleibt golden */
.brand-logo {
  display: inline-block;
  width: 160px;
  height: 34px;
  background: var(--gradient-brand-gold);
  -webkit-mask: var(--asset-logo) center/contain no-repeat;
          mask: var(--asset-logo) center/contain no-repeat;
  filter: var(--glow-brand);
}