/**
 * Volt UI – Design Tokens & Utility Classes
 * ==========================================
 * Importiere diese Datei einmalig in deinem Projekt:
 *   import "./volt-ui.css";
 *
 * Voraussetzungen:
 *   - Tailwind CSS v4
 *   - Google Fonts: Space Grotesk, DM Sans, JetBrains Mono
 *     (in index.html oder via @import)
 *
 * Hauptfarben:  #E4FF97 Neon Yellow + #000000 Black
 * Schriften:    Space Grotesk · DM Sans · JetBrains Mono
 */

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS – nur Volt-EXKLUSIVE Tokens
   ─────────────────────────────────────────
   EIGENTUMS-REGEL (2026-07-03): Diese Datei wird in layout.tsx NACH
   globals.css geladen und gewinnt die Kaskade. Deshalb darf sie KEIN
   Token definieren, das auch src/app/globals.css definiert — sonst
   überschreibt die importierte Showcase-Generation still die Brand-
   Tokens (so lief bis heute --accent auf Alt-Lime #E4FF97 und
   --foreground auf #000 statt Ink). Gemeinsame Tokens (Fonts, Pastelle,
   Signale, shadcn-Block, Charts, --radius) leben AUSSCHLIESSLICH in
   globals.css; der Guard test:token-hygiene erzwingt das.
   Volt-exklusive Alt-Aliase referenzieren die Brand-Tokens.
═══════════════════════════════════════════════════════ */
:root {
  /* ── Schrift-Fallbacks (nur Namen, die globals NICHT definiert) ── */
  --font-body:    var(--font-sans, "DM Sans"), system-ui, sans-serif;

  /* ── Primärfarben (Alt-Aliase → Brand) ── */
  --neon-yellow: var(--brand-lime, #DDFF6B);
  --black:       var(--brand-ink, #0B0B0C);

  /* Aliase */
  --lime:        var(--brand-lime, #DDFF6B);
  --lime-deep:   var(--brand-lime-deep, #C8F060);
  --lime-darker: #9DC800;
  --lime-fg:     var(--brand-ink, #0B0B0C);   /* Text auf Lime-Hintergrund */
  --ink:         var(--brand-ink, #0B0B0C);
  --ink-soft:    var(--brand-ink-2, #1C1C1F);
  --ink-muted:   var(--brand-ink-3, #3A3A3E);

  /* ── Sidebar (im SIS ungenutzt, volt-exklusiv) ── */
  --sidebar:                    #FAFAFA;
  --sidebar-foreground:         var(--brand-ink, #0B0B0C);
  --sidebar-primary:            var(--brand-ink, #0B0B0C);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent:             #F5F5F5;
  --sidebar-accent-foreground:  var(--brand-ink, #0B0B0C);
  --sidebar-border:             var(--volt-border, #E8E8E8);
  --sidebar-ring:               var(--brand-ink, #0B0B0C);

  /* ── Gradient ── */
  --theme-gradient: linear-gradient(135deg, var(--brand-lime, #DDFF6B) 0%, var(--brand-lime-deep, #C8F060) 60%, #A8D840 100%);
}

/* Dark-mode token block removed. Will be reintroduced during the final
   theme pass together with the matching .dark/.volt-dark blocks in
   src/app/globals.css. */

/* TAILWIND-v4-@theme-MAPPING entfernt (2026-07-03): Im SIS wird diese
   Datei als plain <link> geladen — @theme ist dort eine unbekannte
   At-Rule und tot. Als aktivierbare Falle (Import durch die Tailwind-
   Pipeline hätte 20 Token-Konflikte mit globals.css scharfgestellt)
   verstößt sie gegen die Eigentums-Regel oben; das @theme des SIS lebt
   ausschließlich in src/app/globals.css. */

/* ═══════════════════════════════════════════════════════
   TYPOGRAFIE-KLASSEN
═══════════════════════════════════════════════════════ */
.font-display { font-family: var(--font-display); }
.font-ui      { font-family: var(--font-ui); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* Display scale — clamp variants for hero pages.
   Static (non-clamp) versions live in src/app/globals.css and are the
   primary scale. These clamp variants are kept for hero/landing surfaces
   that legitimately need responsive sizing. */
.text-display-xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.text-display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.text-display-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* `.text-label`, `.text-label-sm`, `.text-numeric`, `.section-label`
   are defined as the canonical scale in src/app/globals.css. Definitions
   below mirror those values so this file remains usable standalone. If
   you change one, change the other (UI_AUDIT_TYPOGRAPHY §5.1, §5.7-3). */
.text-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.text-label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.30;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.text-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.30;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════
   GLASSMORPHISMUS
═══════════════════════════════════════════════════════ */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-strong {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.glass-dark {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════
   NOISE-TEXTUR (subtiles Overlay)
═══════════════════════════════════════════════════════ */
.volt-texture {
  position: relative;
}
.volt-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════
   HINTERGRUND-PATTERNS
═══════════════════════════════════════════════════════ */
.pattern-grid {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pattern-dots {
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
}
.pattern-dots-fine {
  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
}
.pattern-dots-coarse {
  background-image: radial-gradient(circle, var(--border) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
}
.pattern-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    var(--border) 8px,
    var(--border) 9px
  );
}
.pattern-cross {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: center center;
}

/* ═══════════════════════════════════════════════════════
   SIGNAL-FARB-KLASSEN (Utility)
═══════════════════════════════════════════════════════ */
.text-positive  { color: var(--signal-positive-text); }
.text-negative  { color: var(--signal-negative-text); }
.text-neutral   { color: var(--signal-neutral-text); }

.bg-positive    { background-color: var(--signal-positive-light); }
.bg-negative    { background-color: var(--signal-negative-light); }
.bg-neutral     { background-color: var(--signal-neutral-light); }

.border-positive { border-color: var(--signal-positive-border); }
.border-negative { border-color: var(--signal-negative-border); }
.border-neutral  { border-color: var(--signal-neutral-border); }

/* ═══════════════════════════════════════════════════════
   VOLT-KARTEN-VARIANTEN (CSS-only, ohne React)
═══════════════════════════════════════════════════════ */
.volt-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem;
}
.volt-card-elevated {
  border-radius: var(--radius);
  background-color: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.08),
    0 8px 32px rgba(0,0,0,0.04);
}
.volt-card-lime {
  border-radius: var(--radius);
  background-color: var(--neon-yellow);
  color: var(--black);
  padding: 1.5rem;
}
.volt-card-solid {
  border-radius: var(--radius);
  background-color: var(--black);
  color: #F5F5F5;
  padding: 1.5rem;
}
.volt-card-glass {
  border-radius: var(--radius);
  padding: 1.5rem;
}
.volt-card-glass { @extend .glass; }

/* ═══════════════════════════════════════════════════════
   VOLT-BUTTON-VARIANTEN (CSS-only, ohne React)
═══════════════════════════════════════════════════════ */
.volt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  border: none;
  outline: none;
  text-decoration: none;
}
.volt-btn:active { transform: scale(0.97); }
.volt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.volt-btn-primary {
  background-color: var(--neon-yellow);
  color: var(--black);
}
.volt-btn-primary:hover { background-color: var(--lime-deep); }

.volt-btn-solid {
  background-color: var(--black);
  color: #FFFFFF;
}
.volt-btn-solid:hover { background-color: var(--ink-soft); }

.volt-btn-outline {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}
.volt-btn-outline:hover { border-color: var(--foreground); }

.volt-btn-ghost {
  background-color: transparent;
  color: var(--muted-foreground);
}
.volt-btn-ghost:hover {
  background-color: var(--secondary);
  color: var(--foreground);
}

.volt-btn-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

/* Größen */
.volt-btn-sm  { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
.volt-btn-lg  { font-size: 1rem;    padding: 0.75rem 1.5rem; }
.volt-btn-xl  { font-size: 1.125rem; padding: 1rem 2rem; }
.volt-btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes volt-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}
@keyframes volt-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.5; }
}
@keyframes volt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes volt-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-breathe        { animation: volt-breathe 3s ease-in-out infinite; }
.animate-volt-fade-in   { animation: volt-fade-in 0.4s ease-out both; }
.animate-volt-slide-in  { animation: volt-slide-in-right 0.3s ease-out both; }