/* =============================================================================
   ApoMotion Onboarding – Neutral Theme / Design-Tokens  (Grafiker-Handoff)
   -----------------------------------------------------------------------------
   Neutrales Standard-Theme (kein ApoMotion-Branding). Marken-Theme:
   apomotion-theme.css (Designwelt apomotion.de).
   ZWECK: Diese eine Datei steuert das komplette Erscheinungsbild der
   Onboarding-Strecke (Farben, Rundungen, Typografie, Abstände, Schatten, Logo).

   FÜR DEN GRAFIKER:
   - Bitte NUR die WERTE rechts vom Doppelpunkt ändern (z. B. Farb-Hex, px-Werte).
   - Token-NAMEN (--xxx) NICHT umbenennen oder löschen – daran hängt das Layout.
   - Keine neuen Selektoren/Regeln ergänzen; nur Werte anpassen.
   - Auf Kontrast achten (Text auf Hintergrund) – Ziel: WCAG AA.
   - Datei anschließend zurückgeben; das Aufspielen übernehmen wir
     (kein Code-Deploy nötig – Datei wird als Theme geladen).

   TECHNIK (für uns): Tailwind/shadcn konsumieren diese Variablen direkt als
   Farbwerte (tailwind.config: colors -> var(--token)). Diese Datei wird NACH
   dem Basis-CSS geladen; optional pro Mandant/Konfiguration austauschbar.
   Light = :root, Dark = .dark.
   ============================================================================= */

:root {
  /* --- 1. MARKEN-PALETTE (frei wählbar) ------------------------------------ */
  --brand-50:  #eaf2ff;
  --brand-100: #d6e4ff;
  --brand-500: #1677ff;   /* Hauptmarkenfarbe (Buttons, Links, Akzente)        */
  --brand-600: #0958d9;   /* Hover/aktiv                                        */
  --brand-700: #003eb3;   /* gedrückt                                           */

  /* --- 2. SEMANTISCHE FARBEN (von Komponenten genutzt) --------------------- */
  --background:        #f5f5f5;   /* Seitenhintergrund                          */
  --foreground:        #1f1f1f;   /* Standard-Textfarbe                         */
  --card:              #ffffff;   /* Kartenfläche (Formulare, Cards)            */
  --card-foreground:   #1f1f1f;   /* Text auf Karten                           */
  --muted:             #f0f0f0;   /* dezente Flächen                           */
  --muted-foreground:  #8c8c8c;   /* Hilfstexte, Platzhalter                    */
  --primary:           var(--brand-500);
  --primary-foreground:#ffffff;   /* Text/Icon auf Primärfarbe                  */
  --primary-hover:     var(--brand-600);
  --secondary:         #ffffff;   /* sekundäre Buttons (Outline)                */
  --secondary-foreground:#1f1f1f;
  --border:            #d9d9d9;   /* Rahmen Inputs/Karten                       */
  --input:             #d9d9d9;   /* Rahmen Eingabefelder                       */
  --ring:              var(--brand-500); /* Fokus-Ring (Tastatur-Navigation)    */

  /* --- 3. STATUS-FARBEN ---------------------------------------------------- */
  --success:           #52c41a;
  --success-foreground:#ffffff;
  --warning:           #faad14;
  --warning-foreground:#1f1f1f;
  --destructive:       #ff4d4f;   /* Fehler / Löschen                          */
  --destructive-foreground:#ffffff;
  --info:              #1677ff;
  --info-foreground:   #ffffff;

  /* --- 4. RUNDUNGEN -------------------------------------------------------- */
  --radius:    8px;     /* Basis-Radius (Buttons, Inputs)                       */
  --radius-sm: 6px;
  --radius-lg: 12px;    /* Karten                                              */
  --radius-pill: 9999px;/* Chips/Badges                                        */

  /* --- 5. TYPOGRAFIE ------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);   /* eigene Headline-Schrift hier eintragen */
  --font-size-base: 14px;
  --font-size-sm:   12px;
  --font-size-lg:   16px;
  --font-size-h1:   22px;
  --font-size-h2:   16px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --line-height-base: 1.5715;

  /* --- 6. ABSTÄNDE (Spacing-Skala) ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --content-max-width: 880px;   /* maximale Breite des Inhaltsbereichs          */

  /* --- 7. SCHATTEN --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.10);

  /* --- 8. MARKEN-ASSETS ---------------------------------------------------- */
  /* Logo: none = kein Logo in der TopBar; nur setzen wenn Datei vorhanden.    */
  --brand-logo-url: none;
  --brand-logo-height: 28px;
  --brand-logo-width: 0px;
  --brand-favicon-url: url("/favicon.svg");
  --brand-bg-image: none;       /* optionales Hintergrundbild, z. B. url(...)   */
}

/* =============================================================================
   DARK MODE (optional) – nur Werte anpassen, falls ein dunkles Theme gewünscht.
   Wird aktiv, wenn die App die Klasse .dark setzt.
   ============================================================================= */
.dark {
  --background:        #141414;
  --foreground:        #f0f0f0;
  --card:              #1f1f1f;
  --card-foreground:   #f0f0f0;
  --muted:             #262626;
  --muted-foreground:  #8c8c8c;
  --primary:           var(--brand-500);
  --primary-foreground:#ffffff;
  --secondary:         #1f1f1f;
  --secondary-foreground:#f0f0f0;
  --border:            #303030;
  --input:             #303030;
  --ring:              var(--brand-500);
}