/* ============================================================
   Vivere Vital Mitfahrzentrale — Design-Tokens
   Kontrast-Regeln (WCAG 2.1 AA):
   - Orange #ff9900 NIE als Textfarbe → nur Flaechen/Dekor.
     CTA-Buttons: orange Flaeche + dunkler Text (#26221b, 6.9:1)
   - Orange als Text nur --accent-text (#8a5200, 5.1:1 auf Creme)
   ============================================================ */
:root {
  /* Gruen (Marke) */
  --green-900: #24402f;
  --green-800: #2f5440;
  --green-700: #38604a;
  --green-600: #3f6c51;   /* Primary */
  --green-500: #52815f;
  --green-400: #5a8c6d;
  --green-200: #b9cfc0;
  --green-100: #dce8df;
  --green-050: #eef3ef;   /* helle Flaeche */

  /* Orange (Akzent — Flaeche/Dekor) */
  --accent: #ff9900;
  --accent-strong: #f08c00;
  --accent-soft: #ffedd0;
  --accent-text: #8a5200; /* AA-konformes Orange fuer Text */

  /* Neutral / Flaechen */
  --cream: #faf7f0;       /* Seiten-Hintergrund, warm */
  --card: #ffffff;
  --sand: #f3efe6;
  --border: #e6e1d5;
  --border-strong: #d4cdbc;

  /* Text */
  --text: #26221b;
  --text-soft: #4c4a42;
  --text-muted: #6d6a60;  /* 4.9:1 auf Creme */
  --text-on-green: #ffffff;
  --text-on-accent: #26221b;

  /* Status (AA auf hellen Flaechen) */
  --ok: #256c3c;
  --ok-soft: #ddefe1;
  --warn: #8a5200;
  --warn-soft: #ffedd0;
  --danger: #a4262c;
  --danger-soft: #fbe4e4;
  --neutral-soft: #ecebe6;

  /* Typo */
  --font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;   /* Body — bewusst >16px fuer die Zielgruppe */
  --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.125rem);
  --fs-3xl: clamp(2.125rem, 1.6rem + 2.7vw, 3.25rem);

  /* Raster */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Form */
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.375rem;
  --radius-pill: 999px;

  /* Tiefe — gruenstichig, weich */
  --shadow-sm: 0 1px 3px rgba(47, 84, 64, 0.08);
  --shadow: 0 3px 14px rgba(47, 84, 64, 0.1);
  --shadow-lg: 0 12px 34px rgba(47, 84, 64, 0.16);

  /* Interaktion */
  --focus-ring: 3px solid var(--green-600);
  --tap-min: 2.75rem; /* 44px Touch-Targets */

  --header-h: 4rem;
  --bottomnav-h: 4.25rem;
  --maxw: 68rem;
}