/* =========================================================
   Design-Tokens — gemeinsame Quelle für Homepage & Landing
   Nicht in homepage/ oder landing/ direkt bearbeiten!
   Diese Datei bearbeiten, dann `sync.ps1` ausführen.

   Palette: Navy + Gold. Gewählt, weil die Seite im Feed gegen
   andere Stellenanzeigen antritt — Blau/Grün ist dort die
   Standardanmutung (StepStone, Indeed) und geht unter.

   WICHTIG zum Gold: nur als schmaler Akzent verwenden — Zahlen,
   Eyebrow-Labels, kleine Marker. Großflächig (Buttons, Flächen)
   kippt es in die "Werde reich"-Anmutung, die bei Recruiting für
   Finanzvertrieb genau die falschen Leute anzieht.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* --- Flächen & Text --- */
  --c-bg:              #ffffff;
  --c-bg-subtle:       #f6f8fb;
  --c-surface:         #ffffff;
  --c-text:            #0f172a;
  --c-text-muted:      #5a6577;
  --c-border:          #e2e8f0;

  /* --- Aktionsfarbe: Buttons, CTA-Bänder, Rahmen --- */
  --c-accent:          #0f172a;
  --c-accent-hover:    #1e293b;
  --c-accent-subtle:   #eef2f8;
  --c-on-accent:       #ffffff;

  /* --- Links: eigene Rolle, weil Navy sich nicht vom Fließtext abhebt --- */
  --c-link:            #1e3a8a;
  --c-link-hover:      #1d4ed8;

  /* --- Gold: sparsam einsetzen (siehe Kopfkommentar) --- */
  --c-gold:            #a16207;
  --c-gold-subtle:     #fdf6e7;

  --c-success:         #15803d;
  --c-error:           #b4232c;

  /* --- Typografie --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Fluide Schriftgrößen (skalieren mit dem Viewport) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.90rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.55rem);
  --step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.40rem);

  /* --- Abstände --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Form & Tiefe --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 32px rgb(15 23 42 / 0.12), 0 4px 8px rgb(15 23 42 / 0.05);

  /* --- Layout --- */
  --container: 68rem;
  --container-narrow: 44rem;

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dunkelmodus ---
   Navy als Aktionsfarbe verschwindet auf dunklem Grund. Deshalb
   dreht sich das Verhältnis um: helle Fläche, dunkle Schrift. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:            #0b1120;
    --c-bg-subtle:     #111a2e;
    --c-surface:       #151f35;
    --c-text:          #e8ecf3;
    --c-text-muted:    #9aa7bd;
    --c-border:        #26314a;

    --c-accent:        #b9ccff;
    --c-accent-hover:  #d2e0ff;
    --c-accent-subtle: #1a2540;
    --c-on-accent:     #0b1120;

    --c-link:          #a8c0ff;
    --c-link-hover:    #c9d8ff;

    --c-gold:          #e3ad4a;
    --c-gold-subtle:   #251d0d;

    --c-success:       #4ade9a;
    --c-error:         #ff8b93;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.28);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45), 0 2px 4px rgb(0 0 0 / 0.28);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.35);
  }
}