/* Runhorse Design-Tokens v1 (09/2026). Quelle der Werte: live tokens.css der Website + Projektvorgabe #1A6B3C.
   Dieselbe Datei liegt im Astro-Projekt unter src/styles/rh-tokens.css. Änderungen immer an beiden Orten. */
:root {
  /* Marke */
  --rh-brand: #1B9E4B;          /* Runhorse-Grün: Akzente, Grafik, grosse Schrift. Weiss darauf nur 3.5:1 -> nicht für kleinen Text */
  --rh-brand-strong: #1A6B3C;   /* kontrastgerechte Variante: Buttons mit weisser Schrift (6.5:1), Links auf Hell */
  --rh-brand-deep: #124D2B;     /* Hover/Active von brand-strong */
  --rh-brand-on-dark: #3CCB72;  /* Grün als Text auf Dunkel (8:1 auf --rh-ink) */
  --rh-brand-tint: #E8F5EC;     /* helle Markenfläche */
  --rh-accent: #F4A100;         /* Offerten-CTA der Website (dunkle Schrift darauf 8:1) */
  --rh-ink: #080B12;            /* Dunkelfläche der Website: Header, Hero, Admin-Navigation */
  --rh-ink-2: #0F1219;
  --rh-ink-3: #1A1F2A;
  /* Text */
  --rh-text: #10151C;
  --rh-text-2: #4A5561;         /* 7.6:1 auf Weiss */
  --rh-text-3: #5F6A75;         /* 5.5:1 auf Weiss, 5.2:1 auf --rh-page – Untergrenze für kleinen Text */
  --rh-text-on-dark: #F0F0F0;
  --rh-text-on-dark-2: #A9AFB8; /* 8.6:1 auf --rh-ink */
  /* Flächen und Linien */
  --rh-page: #F8FAF6;           /* helle Sektionen der Website */
  --rh-surface: #FFFFFF;
  --rh-surface-2: #F1F4EF;
  --rh-line: #DDE3DC;
  --rh-line-strong: #8C968D;    /* 3:1 für Eingabefeld-Ränder */
  /* Status */
  --rh-ok: #1A6B3C;      --rh-ok-bg: #E8F5EC;
  --rh-warn: #7A4E00;    --rh-warn-bg: #FFF3D6;  --rh-warn-line: #E7C76B;
  --rh-err: #A8201A;     --rh-err-bg: #FDECEA;   --rh-err-line: #E9A8A3;
  --rh-info: #1D4C8F;    --rh-info-bg: #E7EFFA;
  --rh-test: #55308C;    --rh-test-bg: #EFE6FA;
  /* Schrift */
  --rh-font-head: 'Space Grotesk', system-ui, sans-serif;
  --rh-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rh-fs-xs: 0.8125rem; --rh-fs-sm: 0.9375rem; --rh-fs-md: 1.0625rem; --rh-fs-lg: 1.25rem; --rh-fs-xl: 1.625rem; --rh-fs-2xl: 2.125rem;
  /* Abstand (4er-Raster) */
  --rh-1: 4px; --rh-2: 8px; --rh-3: 12px; --rh-4: 16px; --rh-5: 24px; --rh-6: 32px; --rh-7: 48px; --rh-8: 72px;
  /* Radien – wie Website: Karten 16, Buttons/Felder 8 */
  --rh-r-sm: 8px; --rh-r-md: 12px; --rh-r-lg: 16px; --rh-r-pill: 999px;
  /* Ebenen */
  --rh-shadow-1: 0 1px 2px rgba(8,11,18,.06), 0 1px 1px rgba(8,11,18,.04);
  --rh-shadow-2: 0 8px 28px rgba(8,11,18,.10), 0 2px 6px rgba(8,11,18,.06);
  --rh-shadow-3: 0 24px 64px rgba(8,11,18,.24);
  --rh-z-nav: 40; --rh-z-overlay: 80; --rh-z-dialog: 90;
  /* Fokus */
  --rh-focus: 0 0 0 3px #FFFFFF, 0 0 0 6px #1A6B3C;
  --rh-focus-on-dark: 0 0 0 3px #080B12, 0 0 0 6px #3CCB72;
  /* Bewegung: kurz, unterbrechbar */
  --rh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rh-t-fast: 140ms; --rh-t-base: 220ms;
  /* Bedienziel */
  --rh-tap: 44px;
}
@media (prefers-reduced-motion: reduce) { :root { --rh-t-fast: 0ms; --rh-t-base: 0ms; } }