@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800&display=swap'); /* Story-48 */
/* ════════════════════════════════════════════════════════════════════
 * vDCA — Design-Tokens (Lead Manager + Call Manager)
 * ════════════════════════════════════════════════════════════════════
 * Story 11 V1: zentrale CSS-Variablen für konsistenten Look beider Apps.
 *
 * Diese Datei liegt zweifach im Repo:
 *   /var/www/repo/leadmanager/design-tokens.css
 *   /var/www/callmanager/design-tokens.css
 * Bei Änderung BEIDE updaten (sie sind identisch).
 *
 * Wird per <link rel="stylesheet" href="design-tokens.css"> eingebunden,
 * VOR den app-spezifischen <style>-Blöcken — damit App-CSS überschreiben kann
 * wenn nötig (aber dann bewusst).
 * ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand & Primary ────────────────────────────────────────────── */
  --primary:         #FF744F;   /* Orange (LM-Standard, jetzt auch CM) */
  --primary-hover:   #FF4B4B;
  --primary-light:   #FFF5F0;
  --primary-dim:     #FFF5F0;   /* Alias für CM-Konvention */

  /* ── Gray-Palette (Tailwind-kompatibel) ─────────────────────────── */
  --gray-50:         #f8fafc;
  --gray-100:        #f1f5f9;
  --gray-200:        #e2e8f0;
  --gray-300:        #cbd5e1;
  --gray-400:        #94a3b8;
  --gray-500:        #64748b;
  --gray-600:        #475569;
  --gray-700:        #334155;
  --gray-800:        #1e293b;
  --gray-900:        #0f172a;

  /* ── Semantic Status Colors ─────────────────────────────────────── */
  --success:         #10b981;
  --success-dim:     #d1fae5;
  --warning:         #f59e0b;
  --warning-dim:     #fef3c7;
  --danger:          #ef4444;
  --danger-dim:      #fee2e2;
  --info:            #3b82f6;
  --info-dim:        #dbeafe;

  /* ── Surface (CM-Konvention beibehalten, mapped auf gray-Werte) ─── */
  --bg:              var(--gray-50);
  --surface:         #ffffff;
  --surface-2:       #f7f8fc;
  --surface-3:       var(--gray-100);
  --border:          var(--gray-200);
  --border-2:        var(--gray-300);

  /* ── Text (CM-Konvention beibehalten) ───────────────────────────── */
  --text:            var(--gray-900);
  --text-2:          var(--gray-600);
  --text-3:          var(--gray-400);

  /* ── Status-Color-Aliase (CM badge-Klassen referenzieren das) ───── */
  --green:           var(--success);
  --green-dim:       var(--success-dim);
  --amber:           var(--warning);
  --amber-dim:       var(--warning-dim);
  --red:             var(--danger);
  --red-dim:         var(--danger-dim);
  --blue:            var(--info);
  --blue-dim:        var(--info-dim);

  /* ── Sidebar (CM dark-theme bleibt, aber Akzent jetzt Orange) ───── */
  --sidebar-bg:      #1A2035;
  --sidebar-accent:  var(--primary);

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.15);

  /* ── Border-Radius ──────────────────────────────────────────────── */
  --r-sm:            6px;
  --r-md:            10px;
  --r-lg:            14px;
  --r-xl:            18px;

  /* ── Fonts ──────────────────────────────────────────────────────── */
  --font-head:       'Maven Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:       'Maven Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ════════════════════════════════════════════════════════════════════
 * Konsistente Badge-Klassen (cross-app)
 * Damit beide Apps die gleichen .badge-*-Klassen mit gleicher Optik haben.
 * ════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}
.badge-green { background: var(--success-dim); color: var(--success); }
.badge-amber { background: var(--warning-dim); color: var(--warning); }
.badge-red   { background: var(--danger-dim);  color: var(--danger);  }
.badge-blue  { background: var(--info-dim);    color: var(--info);    }
.badge-gray  { background: var(--gray-100);    color: var(--gray-600); }
/* ════════════════════════════════════════════════════════════════════
   Story-48 — Liquid Refresh v2 (Fable-5-Design-Pass, 11.06.2026)
   valantic Liquid Brand System: Maven Pro · Gradient 45° Coral→Peach als
   Akzent · valantic Black · Royal Blue (Route B). Motion nach Emil:
   nur transform/opacity/color, ease-out, <300ms, scale(0.97) auf :active.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --vl-coral: #FF4B4B;
  --vl-peach: #FF744F;
  --vl-black: #100C2A;
  --vl-royal: #3C4BC8;
  --vl-silver: #CDCDCD;
  --vl-gradient: linear-gradient(45deg, #FF4B4B 0%, #FF744F 100%);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Typo-Feinschliff ── */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: 700; }
.stat-number, .story29f-stat-number, [class*="stat-num"] { font-variant-numeric: tabular-nums; }
::selection { background: rgba(255, 116, 79, 0.22); }

/* ── Fokus: sichtbar, brand-konform (Tastatur-Nutzer) ── */
:focus-visible {
  outline: 2px solid var(--vl-peach);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ── Buttons: Motion + Gradient-Hover auf Primär-CTAs ── */
.btn-primary, .btn-primary-emil, .btn-emil-primary, .btn-new-lead, .btn-save, .btn-export {
  transition: transform 160ms var(--ease-out-strong),
              box-shadow 160ms var(--ease-out-strong),
              background-color 160ms ease, background-position 200ms ease;
}
.btn-primary:hover, .btn-primary-emil:hover, .btn-emil-primary:hover, .btn-new-lead:hover {
  background: var(--vl-gradient);
  box-shadow: 0 4px 14px rgba(255, 75, 75, 0.28);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-primary-emil:active, .btn-emil-primary:active, .btn-new-lead:active,
.btn-secondary:active, .btn-emil-secondary:active, .btn-ghost:active, .btn-emil-ghost:active,
.btn-danger:active, .btn-save:active, .btn-export:active {
  transform: scale(0.97);
}
.btn-secondary, .btn-emil-secondary, .btn-ghost, .btn-ghost-emil, .btn-emil-ghost, .btn-danger, .btn-emil-danger {
  transition: transform 160ms var(--ease-out-strong),
              background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* ── Badges: konsequent Pill-Form ── */
[class^="badge-"], [class*=" badge-"] {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Karten: ruhige Tiefe, Hover-Lift nur wo klickbar ── */
.card, .dash-card, .draft-card-emil, .contact-card-emil {
  transition: transform 180ms var(--ease-out-strong), box-shadow 180ms var(--ease-out-strong);
}
.dash-card:hover, .draft-card-emil:hover, .contact-card-emil:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 12, 42, 0.10);
}

/* ── Tabs: Gradient-Indikator statt flacher Linie ── */
.tab { position: relative; transition: color 150ms ease; }
.tab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--vl-gradient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms var(--ease-out-strong);
}
.tab.active::after { transform: scaleX(1); }
.tab.active { color: var(--vl-black); font-weight: 600; }

/* ── Sidebar/Nav: aktiver Eintrag mit Gradient-Marker ── */
.app-nav a, .app-nav .nav-item, .nav-item {
  position: relative;
  transition: background-color 150ms ease, color 150ms ease;
}
.app-nav a.active::before, .app-nav .nav-item.active::before, .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 999px;
  background: var(--vl-gradient);
}

/* ── Inputs: ruhiger Brand-Fokus ── */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], select, textarea {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="date"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color: var(--vl-peach) !important;
  box-shadow: 0 0 0 3px rgba(255, 116, 79, 0.18);
  outline: none;
}

/* ── Detail-Panel & Modals: sanfter Auftritt (Emil: nie aus scale(0)) ── */
@keyframes vlPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vlModalIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.detail-panel { animation: vlPanelIn 220ms var(--ease-out-strong); }
.modal, .modal-content, [class*="modal-box"] { animation: vlModalIn 180ms var(--ease-out-strong); }
.detail-overlay { backdrop-filter: blur(2px); }

/* ── Tabellen (geklasste): ruhigere Köpfe ── */
table th {
  letter-spacing: 0.03em;
}

/* ── Scrollbar: dezent, navy ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(16, 12, 42, 0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(16, 12, 42, 0.30); }

/* ── Toasts: von unten, ease-out ── */
@keyframes vlToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
[class*="toast"] { animation: vlToastIn 200ms var(--ease-out-strong); }

/* ── Skeleton-Shimmer im Brand-Ton ── */
[class*="skeleton"] {
  background: linear-gradient(90deg, #F3F3F6 25%, #FBEDE8 50%, #F3F3F6 75%);
  background-size: 200% 100%;
  animation: vlShimmer 1.4s ease infinite;
}
@keyframes vlShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Barrierefreiheit: Motion respektieren ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}