/*
 * Livora theme — DELIFE Integration & Workflow Platform.
 *
 * Aesthetik: refined editorial minimalism, kalibriert nach delife.de.
 * Reines Weiß als Bühne (Light), tiefes Charcoal als Nacht (Dark).
 * Cognac als EINE Signatur-Akzentfarbe (Buttons, Focus, Links). Kein
 * vergilbtes Pergament, kein sandiger Sattler-Look. Schichtung über
 * weiche Schatten und Whisper-Borders — nicht über getönte Flächen.
 *
 * Brand secondary = DELIFE-Charcoal (Light) bzw. helles Weiß (Dark).
 * Damit gibt es zwei Brand-Signale: die warme Cognac-Markierung und
 * die kühl-präzise Charcoal-/Weiß-Fläche. Status-Slots in modernen,
 * gedämpften Tönen (Tailwind-style Pal[700] light / [400] dark).
 *
 * Reusable als Vorlage für weitere DELIFE-Instanzen (delife-gf,
 * delife-staging usw.).
 */

:root {
  /* Surfaces — Body leicht off-white (kühler Whisper), Cards reines
     Weiß damit sie sichtbar schweben. Tiefe = Background-Versatz +
     Shadow + Whisper-Border, statt reinem Flachland. Linear / Vercel
     / Stripe-Lineage für Daten-UI ohne Produktfotos. */
  --color-background: #f7f7f8 !important;
  --color-foreground: #0f0f10 !important;
  --color-card: #ffffff !important;
  --color-card-foreground: #0f0f10 !important;
  --color-popover: #ffffff !important;
  --color-popover-foreground: #0f0f10 !important;
  --color-muted: #ededee !important;
  --color-muted-foreground: #5c5c61 !important;
  --color-secondary: #e4e4e7 !important;
  --color-secondary-foreground: #0f0f10 !important;
  --color-accent: #ededee !important;
  --color-accent-foreground: #0f0f10 !important;

  /* Brand — Cognac als einzige warme Markierung, Charcoal als
     DELIFE-Signatur für Footer/dark surfaces. */
  --color-primary: #8a4a1e !important;
  --color-primary-foreground: #ffffff !important;
  --color-brand-secondary: #1a1a1a !important;
  --color-brand-secondary-foreground: #ffffff !important;

  /* Whisper graphite, kein warmer Sand. */
  --color-border: #e4e4e7 !important;
  --color-input: #e4e4e7 !important;
  --color-ring: #8a4a1e !important;

  /* Status — moderne gedämpfte Töne (deep emerald, gold, red, teal).
     Bewusst aus dem Cognac-Hue herausgehalten, alle paarweise distinkt. */
  --color-success: #15803d !important;
  --color-success-foreground: #ffffff !important;
  --color-error: #b91c1c !important;
  --color-error-foreground: #ffffff !important;
  --color-destructive: #b91c1c !important;
  --color-destructive-foreground: #ffffff !important;
  --color-warning: #ca8a04 !important;
  --color-warning-foreground: #0f0f10 !important;
  --color-info: #0e7490 !important;
  --color-info-foreground: #ffffff !important;

  --color-footer-bg: #1a1a1a !important;
  --color-footer-foreground: #fafafa !important;

  --color-bubble-user: #ededee !important;
  --color-bubble-ai: #f7f7f8 !important;
  --color-bubble-system: #ededee !important;

  /* Tiefe statt Flachland — Cards schweben sichtbar gegen den
     Off-White-Body. Schatten kräftig genug für Daten-Dashboards
     ohne Produktfotos. */
  --shadow-sm: 0 1px 2px 0 rgba(15, 15, 16, 0.06) !important;
  --shadow-md: 0 2px 6px -1px rgba(15, 15, 16, 0.10), 0 1px 2px -1px rgba(15, 15, 16, 0.06) !important;
  --shadow-lg: 0 8px 16px -4px rgba(15, 15, 16, 0.14), 0 3px 6px -3px rgba(15, 15, 16, 0.08) !important;
  --shadow-xl: 0 16px 28px -6px rgba(15, 15, 16, 0.18), 0 6px 12px -6px rgba(15, 15, 16, 0.10) !important;
}

:root .grid-bg {
  --grid-major: rgba(15, 15, 16, 0.025) !important;
  --grid-minor: rgba(15, 15, 16, 0.01) !important;
}

.dark {
  /* Dark = DELIFE-Footer-Charcoal als Bühne. Tiefer als Standard-Browser-
     Dark, klar gegen reines Schwarz abgesetzt — moderne SaaS-Dark
     (Linear/Vercel-Lineage), nicht Walnut-Möbelmanufaktur. */
  --color-background: #0e0e10 !important;
  --color-foreground: #fafafa !important;
  --color-card: #19191c !important;
  --color-card-foreground: #fafafa !important;
  --color-popover: #19191c !important;
  --color-popover-foreground: #fafafa !important;
  --color-muted: #19191c !important;
  --color-muted-foreground: #a0a0a8 !important;
  --color-secondary: #27272a !important;
  --color-secondary-foreground: #fafafa !important;
  --color-accent: #27272a !important;
  --color-accent-foreground: #fafafa !important;

  /* Cognac heller für Dark — gleicher Hue, brauchbarer Kontrast.
     Brand-secondary spiegelt das Light-Charcoal: helles Weiß als
     zweite DELIFE-Signatur auf schwarzer Bühne. */
  --color-primary: #d89770 !important;
  --color-primary-foreground: #0e0e10 !important;
  --color-brand-secondary: #e4e4e7 !important;
  --color-brand-secondary-foreground: #0e0e10 !important;

  --color-border: #27272a !important;
  --color-input: #27272a !important;
  --color-ring: #d89770 !important;

  /* Status — helle, saturated Töne damit sie auf Charcoal aufpoppen. */
  --color-success: #22c55e !important;
  --color-success-foreground: #0e0e10 !important;
  --color-error: #ef4444 !important;
  --color-error-foreground: #0e0e10 !important;
  --color-destructive: #ef4444 !important;
  --color-destructive-foreground: #0e0e10 !important;
  --color-warning: #eab308 !important;
  --color-warning-foreground: #0e0e10 !important;
  --color-info: #06b6d4 !important;
  --color-info-foreground: #0e0e10 !important;

  --color-footer-bg: #0e0e10 !important;
  --color-footer-foreground: #fafafa !important;

  --color-bubble-user: #19191c !important;
  --color-bubble-ai: #1f1f23 !important;
  --color-bubble-system: #19191c !important;

  /* Auf schwarzer Bühne braucht es schwarz-basierte tiefere Schatten
     um Karten lesbar zu trennen. */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40) !important;
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40) !important;
  --shadow-lg: 0 6px 12px -4px rgba(0, 0, 0, 0.55), 0 3px 6px -3px rgba(0, 0, 0, 0.40) !important;
  --shadow-xl: 0 12px 22px -8px rgba(0, 0, 0, 0.60), 0 6px 10px -6px rgba(0, 0, 0, 0.45) !important;
}

.dark .grid-bg {
  --grid-major: rgba(216, 151, 112, 0.05) !important;
  --grid-minor: rgba(216, 151, 112, 0.018) !important;
}

:root,
.dark {
  --radius-sm: 0 !important;
  --radius-md: 0 !important;
  --radius-lg: 0 !important;
  --radius-xl: 0 !important;
  --radius-2xl: 0 !important;
  --radius-3xl: 0 !important;
  --radius-4xl: 0 !important;
}

*,
*::before,
*::after {
  border-radius: 0 !important;
}