/*
 * STANDBY Marken-Design – Design Tokens
 * ======================================
 * AUTOMATISCH GENERIERT von webseite/tools/sync-styleguide.sh.
 * Quelle der Wahrheit (aktuelle Phase):
 *   webseite/public_html/assets/css/main.css  ->  :root
 *
 * NICHT HIER VON HAND EDITIEREN. Werte in der Website ändern, dann:
 *   webseite/tools/sync-styleguide.sh   (regeneriert diese Datei)
 */

:root {
  /* Logo-Kernfarben (Quelle: standby-leuchtfeuer-logo.svg) */
  --farbe-navy: #20366d;
  /* Tiefes Dunkelblau – Verlaufsstart */
  --farbe-blau: #5ca0cb;
  /* Helles Blau – Verlaufsmitte */
  --farbe-pink: #ed6ea7;
  /* Pink – Verlaufsende */
  --farbe-gelb: #fcc11f;
  /* Gelb/Gold – das Licht */
  --farbe-text: #4a4a49;
  /* Dunkelgrau – Schrift */

  /* Navy-Stufen (Shades von #20366D) */
  --navy-950: #111d3d;
  --navy-900: #182852;
  --navy-600: #2a478f;
  --navy-100: #d9e0ee;
  --navy-050: #eef1f7;

  /* Blau-Stufen (von #5CA0CB) */
  --blau-800: #2f6e97;
  /* Linkfarbe – kontraststark auf Weiß */
  --blau-100: #deecf4;
  --blau-050: #f1f7fb;
  /* heller Sektions-Hintergrund */

  /* Pink-Stufen (von #ED6EA7) */
  --pink-700: #c94b86;
  --pink-100: #fbdfec;
  --pink-050: #fdf2f8;

  /* Violett – Übergangston des Logo-Verlaufs (Navy-600 zu 55% mit
     Pink-700 gemischt; Blau→Pink-Passage, KEIN Bezug zu Gelb) */
  --violett-800: #6d498b;

  /* Gelb-Stufen (von #FCC11F) */
  --gelb-600: #d9a404;
  --gelb-100: #fef0c9;
  --gelb-050: #fff9e8;

  /* Grau-Stufen (von #4A4A49) */
  --text-hell: #6b6b6a;
  --grau-200: #e4e4e3;
  --grau-100: #f0f0ef;
  --grau-050: #f8f8f7;

  /* Neutral */
  --farbe-weiss: #ffffff;

  /* Text auf dunklen Flächen */
  --text-auf-dunkel: rgba(255, 255, 255, 0.82);
  --text-auf-dunkel-stark: #ffffff;
  --text-auf-dunkel-soft: rgba(255, 255, 255, 0.82);

  /* Marken-Gradient (exakt wie Logo: Dunkelblau -> Hellblau -> Pink) */
  --gradient-marke: linear-gradient(90deg, var(--farbe-navy) 0%, var(--farbe-blau) 52%, var(--farbe-pink) 100%);
  --gradient-marke-135: linear-gradient(135deg, var(--farbe-navy) 0%, var(--farbe-blau) 52%, var(--farbe-pink) 100%);

  /* Nacht-Gradient (Navy-Tiefe für Hero, Menü, Footer, Stat-Bänder) */
  --gradient-nacht: linear-gradient(168deg, var(--navy-900) 0%, var(--farbe-navy) 55%, var(--navy-600) 100%);

  /* Heller Himmel-Verlauf für sanfte Sektionsübergänge */
  --gradient-himmel: linear-gradient(180deg, var(--blau-050) 0%, var(--farbe-weiss) 100%);

  /* Typografie */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid Display-Größen */
  --text-display: clamp(2.35rem, 4.5vw + 1rem, 4rem);
  --text-h1: clamp(2.1rem, 3.2vw + 0.9rem, 3.25rem);
  --text-h2: clamp(1.6rem, 2vw + 0.8rem, 2.35rem);
  --text-h3: clamp(1.25rem, 0.8vw + 1rem, 1.55rem);
  --text-lead: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);

  /* Statische Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* 8px Grid System */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Shadows – navy-getönt statt schwarz (wirkt hochwertiger) */
  --shadow-sm: 0 1px 2px rgba(32, 54, 109, 0.06);
  --shadow-md: 0 4px 12px rgba(32, 54, 109, 0.08), 0 1px 3px rgba(32, 54, 109, 0.05);
  --shadow-lg: 0 12px 32px rgba(32, 54, 109, 0.11), 0 2px 8px rgba(32, 54, 109, 0.05);
  --shadow-xl: 0 24px 64px rgba(32, 54, 109, 0.15), 0 4px 16px rgba(32, 54, 109, 0.07);
  --shadow-gelb: 0 10px 28px rgba(252, 193, 31, 0.35);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /* Max Width Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* Header-Höhe (für Anker-Offsets) */
  --header-offset: 96px;
}

/* =============================================================================
 * Projekt-Tokens Web-Formulare — semantische Ebene
 * =============================================================================
 * Ab hier projektspezifisch (NICHT aus dem Marken-Repo generiert; beim
 * Re-Sync der Marken-Tokens nur den Block OBERHALB dieser Marke ersetzen).
 *
 * Alle Komponenten-CSS (app.css) nutzt AUSSCHLIESSLICH diese semantischen
 * Tokens. Der Dark Mode (M8) tauscht rein deren Werte über
 * [data-theme="dark"] — kein Komponenten-CSS muss dafür angefasst werden.
 * ========================================================================== */

:root {
  /* Flächen */
  --flaeche: var(--grau-050);            /* Seitenhintergrund */
  --flaeche-karte: var(--farbe-weiss);   /* Karten, Panels */
  --flaeche-kopf: var(--farbe-weiss);    /* Kopfleiste */
  --flaeche-dezent: var(--grau-100);     /* leichte Abstufung (Hover, Zebra) */

  /* Text */
  --text: var(--farbe-text);
  --text-dezent: var(--text-hell);
  --ueberschrift: var(--farbe-navy);

  /* Rahmen und Linien */
  --rahmen: var(--grau-200);
  --rahmen-stark: var(--navy-100);

  /* Eingabefelder (Optik nach Bewerbungsbogen-Referenz) */
  --feld-hintergrund: #f7f8fc;
  --feld-rahmen: #e4e8f4;
  --feld-text: var(--farbe-text);

  /* Aktionen */
  --primaer: var(--farbe-gelb);          /* Primäraktion (Gelb, Navy-Text) */
  --primaer-text: var(--farbe-navy);
  --sekundaer: var(--farbe-navy);        /* Arbeits-/Sekundärfarbe */
  --sekundaer-text: var(--farbe-weiss);
  --link: var(--blau-800);
  --fokus: var(--pink-700);              /* Fokus-Ringe, aktive Details */

  /* Statusfarben */
  --erfolg: #2e7d4f;
  --fehler: #b3364b;
}

/* =============================================================================
 * Zusätzliche semantische Tokens (Meldungen, Akzente, Fokus)
 * ========================================================================== */

:root {
  --nav-aktiv: var(--navy-050);
  --abzeichen-flaeche: var(--navy-100);
  --abzeichen-text: var(--farbe-navy);
  --akzent-text: var(--pink-700);          /* Untertitel-Badge, Rollen-Labels */
  --akzent-flaeche: var(--pink-050);
  --fokus-ring: var(--blau-100);
  --hinweis-flaeche: var(--gelb-050);
  --hinweis-rahmen: var(--gelb-100);
  --erfolg-flaeche: #eef7f1;
  --erfolg-rahmen: #cfe7d8;
  --fehler-flaeche: #fdf0f2;
  --fehler-rahmen: #f3cdd5;
}

/* =============================================================================
 * Dark Mode — dunkle Palette (KONZEPT 11.2)
 * =============================================================================
 * Markenseitig nicht definiert, hier projektspezifisch festgelegt: Flächen aus
 * den Navy-Tiefen, Gelb bleibt Primäraktion, Feld-Hintergründe dunkel mit
 * erkennbarem Rahmen. Anspruch: WCAG AA für Text und Bedienelemente.
 * Reiner Token-Tausch — kein Komponenten-CSS wird angefasst.
 * ========================================================================== */

[data-theme="dark"] {
  /* Native Bedienelemente (Datumspicker, Scrollbalken) dunkel rendern */
  color-scheme: dark;

  /* Flächen */
  --flaeche: var(--navy-950);
  --flaeche-karte: var(--navy-900);
  --flaeche-kopf: var(--navy-900);
  --flaeche-dezent: rgba(255, 255, 255, 0.07);

  /* Text */
  --text: var(--text-auf-dunkel);
  --text-dezent: rgba(255, 255, 255, 0.62);
  --ueberschrift: var(--text-auf-dunkel-stark);

  /* Rahmen und Linien */
  --rahmen: #2c3f74;
  --rahmen-stark: #3d5391;

  /* Eingabefelder: dunkel, mit erkennbarem Rahmen */
  --feld-hintergrund: #131f42;
  --feld-rahmen: #3a4e88;
  --feld-text: var(--text-auf-dunkel);

  /* Aktionen: Gelb bleibt die Primäraktion */
  --sekundaer: var(--navy-600);
  --sekundaer-text: var(--farbe-weiss);
  --link: #8ec3e6;
  --fokus: var(--farbe-pink);

  /* Statusfarben */
  --erfolg: #8fd8ac;
  --fehler: #ff9fac;

  /* Zusatz-Tokens */
  --nav-aktiv: rgba(255, 255, 255, 0.09);
  --abzeichen-flaeche: var(--navy-600);
  --abzeichen-text: var(--farbe-weiss);
  --akzent-text: #f795c3;
  --akzent-flaeche: rgba(237, 110, 167, 0.16);
  --fokus-ring: rgba(92, 160, 203, 0.4);
  --hinweis-flaeche: rgba(252, 193, 31, 0.14);
  --hinweis-rahmen: rgba(252, 193, 31, 0.35);
  --erfolg-flaeche: rgba(46, 125, 79, 0.28);
  --erfolg-rahmen: rgba(143, 216, 172, 0.35);
  --fehler-flaeche: rgba(179, 54, 75, 0.3);
  --fehler-rahmen: rgba(255, 159, 172, 0.35);
}