/*
 * Design-Tokens einfach-elterngeld.de
 * Quelle: EE/14_design/farben.md (Farben, unverändert aus Theme/LESS übernommen) und
 * EE/14_design/konzept.md Kap. 3.3 (Abstände, Radien, Schriftskala).
 * Nur Definitionen – diese Datei verändert keine Darstellung. Neue Regeln (Website und
 * Kundenbereich) verwenden ab Phase 1 diese Variablen statt fester Farbwerte.
 */
:root {
  /* ---- Website (Theme) – Markenfarben ---- */
  --ee-rot: #bd3122;
  --ee-rot-dunkel: #a52719;
  --ee-rot-tief: #661c0b;
  --ee-rot-hell: #e6aaa4;
  --ee-rot-zart: #fdd0cb;
  --ee-text: #191919;
  --ee-weiss: #ffffff;
  --ee-grau-50: #f7f7f7;
  --ee-grau-100: #fafafa;
  --ee-grau-200: #e1e1e1;
  --ee-grau-300: #d9d9d9;
  --ee-grau-400: #c0c0c0;
  --ee-grau-500: #a9a9a9;
  --ee-grau-600: #808080;
  --ee-grau-700: #717171;
  --ee-grau-800: #5c5c5c;
  --ee-grau-900: #383838;
  --ee-gruen: #3b9a4f;
  --ee-gruen-zart: #e9f4e9;
  --ee-gruen-hell: #d5e9d5;
  --ee-gelb-zart: #f7ebb4;
  --ee-gelb-hell: #efd87f;

  /* ---- Software / Kundenbereich (LESS) ---- */
  --app-rot: #b93022;
  --app-rot-dunkel: #912616;
  --app-rot-600: #94261b;
  --app-rot-100: #fbdddc;
  --app-grau: #595959;
  --app-grau-hell: #afafaf;
  --app-grau-50: #f9f9f9;
  --app-grau-200: #f1f1f1;
  --app-schwarz: #1b1b1b;
  --app-gruen: #3b9a4f;
  --app-gruen-600: #40ab57;
  --app-gruen-800: #2b773b;
  --app-gruen-100: #dafae1;
  --app-gelb-400: #ffd600;
  --app-orange: #e79e1d;
  --app-gold: #a18844;
  --app-blau: #4b98f3;

  /* ---- Rollen (zeigen nur auf obige Werte) ---- */
  --c-aktion: var(--ee-rot);
  --c-aktion-hover: var(--ee-rot-dunkel);
  --c-link: var(--ee-rot);
  --c-link-hover: var(--ee-rot-tief);
  --c-link-auf-rot: var(--ee-weiss);
  --c-text: var(--ee-text);
  --c-text-2: var(--ee-grau-700);
  --c-flaeche: var(--ee-weiss);
  --c-flaeche-ruhig: var(--ee-grau-100);
  --c-linie: var(--ee-grau-200);
  --c-fokus: var(--ee-text);
  --c-fokus-abstand: var(--ee-weiss);

  /* ---- Typografie (fließend 390 px → 1440 px) ---- */
  --font: "Open Sans", Arial, sans-serif;
  --fs-klein: 0.875rem;
  --fs-text: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h4: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
  --fs-h2: clamp(1.4375rem, 1.25rem + 0.8vw, 2rem);
  --fs-h1: clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);
  --lh-text: 1.65;
  --lh-kopf: 1.25;

  /* ---- Abstände (4er-Raster: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --abschnitt: clamp(3rem, 2rem + 4vw, 6rem);
  --rand: clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* ---- Form ---- */
  --radius-s: 8px;
  --radius: 12px;
  --radius-pill: 999px;
  --schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
  --schatten-hoch: 0 4px 20px rgba(0, 0, 0, .10);
  --tap: 48px;
  --breite: 74rem;
  --lesebreite: 42rem;

  /* ---- Fokus (Tastatur): 3 px Text-Schwarz + 2 px weißer Abstand ---- */
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
}