/* =============================================================================
   StrategAIze — Design-Tokens (IST-Bestand)
   Reine Dokumentation des bestehenden Design-Systems. Quellen:
   - STRATEGAIZE_STYLE_GUIDE_V2.md (kanonisch)
   - .claude/skills/html-export/template.html (Dokument-Look)
   - strategaize-onboarding-plattform: tailwind.config.ts + src/app/globals.css
   Keine Varianten, keine Vorschläge — 1:1 der Bestand.
   ============================================================================= */

@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root {
  /* ---------------------------------------------------------------------------
     BRAND — Blau (Primär)
     --------------------------------------------------------------------------- */
  --brand-primary-dark: #120774;   /* Gradient-Start, Headings-Hover, Accent-Dark */
  --brand-primary:      #4454b8;   /* Primär-Interaktion, Focus-Ring, Border-Aktiv */
  --brand-primary-light:#6b7bd0;   /* aus template.html — helle Brand-Variante */

  /* BRAND — Grün (Erfolg) */
  --brand-success-dark: #00a84f;   /* Gradient-Start Erfolg, "Neu erstellen"-Button */
  --brand-success:      #4dcb8b;   /* Gradient-Ende Erfolg */

  /* BRAND — Gelb (Warnung) */
  --brand-warning-dark: #f2b705;   /* Gradient-Start Warnung */
  --brand-warning:      #ffd54f;   /* Gradient-Ende Warnung (a.k.a. warning-light) */

  /* ---------------------------------------------------------------------------
     GRADIENTS — 135deg (Dokument-Look, template.html) bzw. to-right (App)
     --------------------------------------------------------------------------- */
  --gradient-primary:      linear-gradient(135deg, #120774 0%, #4454b8 100%); /* @kind color */
  --gradient-primary-soft: linear-gradient(135deg, #eef0fa 0%, #dde2f5 100%); /* @kind color */
  --gradient-success:      linear-gradient(135deg, #00a84f 0%, #4dcb8b 100%); /* @kind color */
  --gradient-warning:      linear-gradient(135deg, #f2b705 0%, #ffd54f 100%); /* @kind color */
  --gradient-sidebar:      linear-gradient(180deg, #0f172a 0%, #020617 100%); /* @kind color */
  --gradient-ki:           linear-gradient(135deg, #9333ea 0%, #4f46e5 100%); /* @kind color */ /* KI-Button: purple-600 → indigo-600 */

  /* ---------------------------------------------------------------------------
     NEUTRALS
     --------------------------------------------------------------------------- */
  --bg:            #ffffff;   /* Hauptflächen, Cards */
  --bg-muted:      #f8fafc;   /* Seitenhintergrund (slate-50) */
  --bg-subtle:     #f1f5f9;   /* Chips, Code, Table-Head (slate-100) */
  --fg:            #0f172a;   /* Haupttext / Überschriften (slate-900) */
  --fg-muted:      #475569;   /* Normaler Text / Labels (slate-600) */
  --fg-subtle:     #64748b;   /* Sekundär / Hints / Meta (slate-500) */
  --border:        #e2e8f0;   /* Standard-Border (slate-200) */
  --border-strong: #cbd5e1;   /* stärkere Border (slate-300) */

  /* ---------------------------------------------------------------------------
     STATUS-BADGES (soft-BG + Border + Text)
     --------------------------------------------------------------------------- */
  /* Lead — slate */
  --badge-lead-bg:     #f1f5f9;  /* slate-100 */
  --badge-lead-text:   #334155;  /* slate-700 */
  --badge-lead-border: #e2e8f0;  /* slate-200 */
  /* Qualifiziert — blue */
  --badge-qualified-bg:     #dbeafe;  /* blue-100 */
  --badge-qualified-text:   #1d4ed8;  /* blue-700 */
  --badge-qualified-border: #bfdbfe;  /* blue-200 */
  /* Aktiv — orange */
  --badge-active-bg:     #ffedd5;  /* orange-100 */
  --badge-active-text:   #c2410c;  /* orange-700 */
  --badge-active-border: #fed7aa;  /* orange-200 */
  /* Kunde — emerald */
  --badge-customer-bg:     #d1fae5;  /* emerald-100 */
  --badge-customer-text:   #047857;  /* emerald-700 */
  --badge-customer-border: #a7f3d0;  /* emerald-200 */
  /* Inaktiv — slate-light */
  --badge-inactive-bg:     #f1f5f9;  /* slate-100 */
  --badge-inactive-text:   #94a3b8;  /* slate-400 */
  --badge-inactive-border: #e2e8f0;  /* slate-200 */

  /* ---------------------------------------------------------------------------
     SIDEBAR (Dokument-Look)
     --------------------------------------------------------------------------- */
  --sidebar-bg:         #0f172a;
  --sidebar-fg:         #cbd5e1;
  --sidebar-fg-active:  #ffffff;
  --sidebar-accent:     #1e293b;
  --sidebar-active-bg:  rgba(68, 84, 184, 0.18);

  /* ---------------------------------------------------------------------------
     SHADOWS
     --------------------------------------------------------------------------- */
  --shadow-card:                 0 1px 3px 0 rgb(0 0 0 / 0.08);       /* Cards */
  --shadow-card-hover:           0 10px 15px -3px rgb(0 0 0 / 0.1);   /* Card-Hover (shadow-xl) */
  --shadow-button-primary:       0 4px 12px rgba(68, 84, 184, 0.35);  /* Primary-Button */
  --shadow-button-primary-strong:0 10px 24px rgba(18, 7, 116, 0.35);  /* Hero / starke Elevation */

  /* ---------------------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------------------- */
  --radius-2xl: 1rem;      /* 16px — große Cards (rounded-2xl) */
  --radius-xl:  0.75rem;   /* 12px — Cards (rounded-xl) */
  --radius-lg:  0.5rem;    /* 8px  — Buttons, Inputs (rounded-lg) */
  --radius-full:9999px;    /* Pills / Badges (Dokument-Look) */

  /* ---------------------------------------------------------------------------
     BORDER-WIDTH
     --------------------------------------------------------------------------- */
  --border-width-strong: 2px;  /* border-2 auf allen wichtigen Elementen */

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE
     Soll-Fonts: Inter (Headings 700/800, Body 400–600), JetBrains Mono (Code).
     In den Preview-Karten wird bewusst der system-ui-Stack genutzt (kein CDN).
     --------------------------------------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font-Größen */
  --text-h1:      30px;   /* text-3xl — weight 700 */
  --text-h2:      24px;   /* text-2xl — weight 800 */
  --text-h3:    18.4px;   /* ~text-xl (Dokument-Look 1.15rem) — weight 700 */
  --text-h4:      16px;   /* text-lg-ish — weight 600 */
  --text-body:    14px;   /* text-sm — weight 400–600 */
  --text-small:   12px;   /* text-xs */
  --text-kpi:     36px;   /* text-4xl KPI-Display — weight 700 */
  --text-display: 48px;   /* text-5xl Display-Large — weight 700 */

  /* Font-Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---------------------------------------------------------------------------
     SPACING — konsistentes 6er-Grid
     --------------------------------------------------------------------------- */
  --space-section: 1.5rem;  /* gap-6 zwischen Sektionen */
  --space-inner:   1rem;    /* gap-4 innerhalb Sektionen */
  --content-max:   1800px;  /* App max-width, zentriert */
}