/* ============================================================
   AUTARK INNOVATIONS — UNIFIED BRAND TOKENS (Single Source of Truth)
   2026-04-30 — Phase A: Brand-Unification App <-> Website
   ------------------------------------------------------------
   Diese Datei MUSS vor allen anderen CSS-Files geladen werden.
   Mid-Werte zwischen App (Flutter, #050D1C, #00D4FF) und
   bisheriger Website (#142035, #3B82F6) — eine gemeinsame Marke.
   ============================================================ */

:root {
  /* === UNIFIED BRAND PALETTE === */
  /* Backgrounds (zwischen App-#050D1C und Website-#142035) */
  --bg-primary:    #0A1218;   /* Body-Background, Mid-Value */
  --bg-surface:    #111820;   /* Cards / Surfaces */
  --bg-elevated:   #161D28;   /* Modals, Hover-States */
  --bg-deep:       #070D14;   /* Footer, Deep-Sections */

  /* Text */
  --text-primary:    #F0F6FF;
  --text-secondary:  #A8B8C8;
  --text-muted:      #7A8B9C;

  /* Accents (App-Cyan + Sonnen-Gold + Heat-Orange + Success-Green) */
  --accent-cyan:    #2DD4FF;   /* Mid zwischen App #00D4FF und Website #3B82F6 */
  --accent-gold:    #FFC107;
  --accent-heat:    #FF7E29;
  --accent-green:   #10B981;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.20);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.40);

  /* Glows (reduziert, dezenter) */
  --glow-gold:  0 0 20px rgba(255,193,7,0.20);
  --glow-cyan:  0 0 16px rgba(45,212,255,0.18);
  --glow-heat:  0 0 16px rgba(255,126,41,0.16);
  --glow-green: 0 0 14px rgba(16,185,129,0.16);

  /* Radii */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* Spacing-Skala */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;

  /* Motion */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 140ms;
  --t-base:  280ms;
  --t-slow:  600ms;

  /* Typography */
  --font-display: "Space Grotesk", "Geist", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

/* === GLOBAL BASELINE === */
html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
}

h1, h2, h3, .h-display {
  font-family: var(--font-display);
}