/* ═══════════════════════════════════════════════════════════════
   NEVANU Design Tokens — Zentrale Variable-Definitionen
   ═══════════════════════════════════════════════════════════════
   Kanonische Quelle fuer ALLE CSS Custom Properties.
   Konsolidiert aus keeva-ui.css :root + [data-theme] Selektoren.

   Aufbau:
   1. Globale Tokens (theme-unabhaengig)
   2. Theme: mono (Clean Light)
   3. Theme: keeva-black (Dark Mode — AKTIV)
   4. Theme: light (Legacy Light)
   5. Theme: dark (Legacy Dark, identisch zu keeva-black)
   6. Z-Index Skala
   7. Status-Farben
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Globale Tokens (theme-unabhaengig) ─── */
:root {
  /* Brand */
  --nv-brand: #F27182;
  --nv-brand-light: #fce4e8;
  --nv-brand-glow: rgba(242, 113, 130, .25);

  /* Akzent (warm, nicht violett — sparsam einsetzen) */
  --nv-violet: #ec4899;
  --nv-violet-glow: rgba(236, 72, 153, .22);
  --nv-gradient: linear-gradient(135deg, #ec4899, #F27182);
  --nv-gradient-glow: 0 4px 24px rgba(236, 72, 153, .25), 0 4px 24px rgba(242, 113, 130, .2);

  /* Status */
  --nv-green: #34D399;
  --nv-green-light: rgba(52, 211, 153, .12);
  --nv-blue: #60A5FA;
  --nv-blue-light: rgba(96, 165, 250, .12);
  --nv-yellow: #FBBF24;
  --nv-yellow-light: rgba(251, 191, 36, .12);
  --nv-red: #EF4444;
  --nv-red-light: rgba(239, 68, 68, .12);
  --nv-orange: #FF9500;
  --nv-orange-light: rgba(255, 149, 0, .12);

  /* Erweiterte Farbpalette (fuer Kategorien, Charts, Zahlungsarten) */
  --nv-pink: #E91E63;
  --nv-purple: #9C27B0;
  --nv-indigo: #3F51B5;
  --nv-teal: #009688;
  --nv-cyan: #00BCD4;
  --nv-brown: #795548;
  --nv-gray-blue: #607D8B;
  --nv-gold: #FFD700;

  /* Status Badge Farben (einheitlich fuer ALLE Module) */
  --nv-status-offen: #FF9800;
  --nv-status-offen-bg: rgba(255, 149, 0, .12);
  --nv-status-aktiv: #34D399;
  --nv-status-aktiv-bg: rgba(52, 211, 153, .12);
  --nv-status-erledigt: #34D399;
  --nv-status-erledigt-bg: rgba(52, 211, 153, .12);
  --nv-status-storniert: #EF4444;
  --nv-status-storniert-bg: rgba(239, 68, 68, .12);
  --nv-status-ausstehend: #FBBF24;
  --nv-status-ausstehend-bg: rgba(251, 191, 36, .12);
  --nv-status-gesperrt: #EF4444;
  --nv-status-gesperrt-bg: rgba(239, 68, 68, .12);
  --nv-status-bezahlt: #009688;
  --nv-status-bezahlt-bg: rgba(0, 150, 136, .12);
  --nv-status-entwurf: #607D8B;
  --nv-status-entwurf-bg: rgba(96, 125, 139, .12);

  /* Zahlungsanbieter */
  --nv-twint: #00A3E0;
  --nv-stripe: #635BFF;
  --nv-sumup: #1E88E5;

  /* Typografie */
  --nv-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nv-fs-hero: clamp(2.5rem, 8vw, 4rem);
  --nv-fs-display: clamp(1.8rem, 5vw, 2.5rem);
  --nv-fs-title: 1.1rem;
  --nv-fs-body: .88rem;
  --nv-fs-caption: .72rem;
  --nv-fs-micro: .6rem;
  --nv-fw-black: 900;
  --nv-fw-bold: 700;
  --nv-fw-semibold: 600;
  --nv-fw-medium: 500;
  --nv-fw-regular: 400;
  --nv-ls-tight: -.04em;
  --nv-ls-normal: -.01em;
  --nv-ls-wide: .06em;
  --nv-ls-caps: .1em;
  --nv-lh-none: 1;
  --nv-lh-tight: 1.2;
  --nv-lh-normal: 1.5;

  /* Spacing (8px Grid) */
  --nv-sp-2xs: 2px;
  --nv-sp-xs: 4px;
  --nv-sp-sm: 8px;
  --nv-sp-md: 16px;
  --nv-sp-lg: 24px;
  --nv-sp-xl: 40px;
  --nv-sp-2xl: 64px;

  /* Radien */
  --nv-r-xs: 8px;
  --nv-r-sm: 14px;
  --nv-r-md: 18px;
  --nv-r-lg: 25px;
  --nv-r-xl: 25px;
  --nv-r-full: 9999px;
  --nv-r-card: 20px;

  /* Glow-Effekte */
  --nv-glow-primary: 0 0 20px rgba(242, 113, 130, .3);
  --nv-glow-info: 0 0 20px rgba(59, 130, 246, .3);
  --nv-glow-success: 0 0 20px rgba(52, 211, 153, .3);
  --nv-glow-warning: 0 0 20px rgba(251, 191, 36, .3);
  --nv-glow-danger: 0 0 20px rgba(239, 68, 68, .3);

  /* Easing & Duration */
  --nv-ease: cubic-bezier(.32, .72, 0, 1);
  --nv-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --nv-dur: .3s;
  --nv-dur-fast: .15s;
  --nv-dur-slow: .5s;

  /* Layout */
  --nv-tab-bar-h: 64px;
  --nv-header-h: 56px;
  --nv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nv-safe-top: env(safe-area-inset-top, 0px);
  --nv-content-max: 640px;
  --nv-sidebar-w: 260px;

  /* Module Header Spacing Tokens */
  --nv-module-header-h: 44px;
  --nv-header-to-search: 16px;
  --nv-search-to-content: 16px;
  --nv-header-to-content: 20px;
  --nv-content-row-gap: 8px;
  --nv-section-gap: 24px;
  --nv-card-padding: 16px;
  --nv-content-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);

  /* Z-Index Skala */
  --nv-z-base: 0;
  --nv-z-dropdown: 100;
  --nv-z-sticky: 200;
  --nv-z-fixed: 300;
  --nv-z-header: 400;
  --nv-z-drawer: 500;
  --nv-z-modal: 600;
  --nv-z-popover: 700;
  --nv-z-toast: 800;
  --nv-z-tooltip: 900;
  --nv-z-overlay: 1000;
}


/* ─── 2. Theme: light (WARM CREAM) ─── */
[data-theme="light"] {
  --nv-bg-base: #faf9f7;
  --nv-bg-elevated: #ffffff;
  --nv-bg-surface: #f0ede8;
  --nv-bg: #faf9f7;
  --nv-bg2: #ffffff;
  --nv-bg3: #f0ede8;
  --nv-surface: rgba(255, 255, 255, .80);
  --nv-surface-solid: #ffffff;
  --nv-surface-elevated: rgba(255, 255, 255, .92);
  --nv-text-primary: #1a1612;
  --nv-text-secondary: #5c5248;
  --nv-text-muted: #8a8175;
  --nv-text: #1a1612;
  --nv-text2: rgba(26, 22, 18, .68);
  --nv-text3: rgba(26, 22, 18, .48);
  --nv-text4: rgba(26, 22, 18, .28);
  --nv-text-inverse: #ffffff;
  --nv-border: rgba(60, 45, 30, .10);
  --nv-border-strong: rgba(60, 45, 30, .18);
  --nv-fill: rgba(60, 45, 30, .04);
  --nv-fill-hover: rgba(60, 45, 30, .07);
  --nv-fill-active: rgba(60, 45, 30, .12);
  --nv-glass-bg: rgba(255, 255, 255, .80);
  --nv-glass-bg-hover: rgba(255, 255, 255, .88);
  --nv-glass-bg-strong: rgba(255, 255, 255, .92);
  --nv-glass-border: rgba(60, 45, 30, .10);
  --nv-glass-fallback: rgba(250, 249, 247, .97);
  --nv-glass-blur: blur(24px);
  --nv-shadow-sm: 0 1px 3px rgba(60, 45, 30, .05);
  --nv-shadow-md: 0 4px 16px rgba(60, 45, 30, .07);
  --nv-shadow-lg: 0 8px 40px rgba(60, 45, 30, .10);
  --nv-shadow-glow: 0 8px 40px rgba(236, 72, 153, .08);
  --nv-card-gradient: linear-gradient(135deg, rgba(236, 72, 153, .03), rgba(242, 113, 130, .02));
}


/* ─── 5. Theme: dark (identisch zu keeva-black, warm) ─── */
[data-theme="dark"] {
  --nv-bg-base: #14110e;
  --nv-bg-elevated: #1f1a15;
  --nv-bg-surface: #2a241e;
  --nv-bg: #181411;
  --nv-bg2: #221d18;
  --nv-bg3: #2a241e;
  --nv-surface: rgba(255, 245, 235, .04);
  --nv-surface-solid: #221d18;
  --nv-surface-elevated: rgba(255, 245, 235, .06);
  --nv-text-primary: #f5f1ec;
  --nv-text-secondary: #a8a096;
  --nv-text-muted: #7d756b;
  --nv-text: #f5f1ec;
  --nv-text2: rgba(245, 241, 236, .68);
  --nv-text3: rgba(245, 241, 236, .52);
  --nv-text4: rgba(245, 241, 236, .30);
  --nv-text-inverse: #1a1612;
  --nv-border: rgba(255, 230, 200, .08);
  --nv-border-strong: rgba(255, 230, 200, .14);
  --nv-fill: rgba(255, 230, 200, .06);
  --nv-fill-hover: rgba(255, 230, 200, .10);
  --nv-fill-active: rgba(255, 230, 200, .16);
  --nv-glass-bg: rgba(34, 29, 24, .55);
  --nv-glass-bg-hover: rgba(42, 36, 30, .60);
  --nv-glass-bg-strong: rgba(34, 29, 24, .72);
  --nv-glass-border: rgba(255, 230, 200, .10);
  --nv-glass-fallback: rgba(34, 29, 24, .96);
  --nv-glass-blur: blur(24px);
  --nv-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --nv-shadow-md: 0 4px 16px rgba(0, 0, 0, .40);
  --nv-shadow-lg: 0 8px 40px rgba(0, 0, 0, .50);
  --nv-shadow-glow: 0 8px 40px rgba(236, 72, 153, .10);
  --nv-card-gradient: linear-gradient(135deg, rgba(236, 72, 153, .05), rgba(242, 113, 130, .03));
}


/* ─── 6. Bridge: Erweiterte --k-* Tokens fuer JS-Zugriff ─── */
/* JS-Code nutzt var(--k-*) in inline Styles. Diese Tokens ergaenzen
   die bestehenden --k-* Variablen aus keeva-ui.css um Farben die
   fuer Kategorien, Charts und Zahlungsarten benoetigt werden. */
:root {
  --k-pink: #E91E63;
  --k-purple: #9C27B0;
  --k-indigo: #3F51B5;
  --k-teal: #009688;
  --k-cyan: #00BCD4;
  --k-brown: #795548;
  --k-gray-blue: #607D8B;
  --k-gold: #FFD700;
  --k-twint: #00A3E0;
  --k-stripe: #635BFF;
  --k-sumup: #1E88E5;
  --k-ios-blue: #007AFF;
}