/* ==========================================================================
   Arbeitsrecht REMIEN: Design-Tokens (Redesign, Entwurf Freigabe 1)
   Einzige Quelle für Farben, Schrift, Abstände, Radien, Schatten, Dauern.
   Komponenten verwenden nur diese Variablen, nie feste Werte.
   Ein Farbthema (z. B. kanzlei-remien.de, css/theme-kr.css) überschreibt nur --brand* und --footer.
   ========================================================================== */

:root {
  /* Marke: Arbeitsrecht REMIEN (Bestand) */
  --brand: #8F1E28;
  --brand-strong: #7A1F2B;
  --brand-soft: #F8ECEE;
  --brand-deep: #5E1520;    /* Hover auf roten Flächen */
  --brand-rgb: 143, 30, 40;          /* = --brand, für transparente Töne */
  --brand-strong-rgb: 122, 31, 43;   /* = --brand-strong, Schattentönung */

  /* Neutrale Töne (Bestand) */
  --ink: #212529;
  --muted: #646D75;
  --line: #DFE3E8;
  --surface: #F5F6F7;
  --white: #FFFFFF;
  --footer: #3A0A10;        /* Bestand: .bg-black ist dunkles Burgund */
  --on-brand-muted: rgba(255, 255, 255, .82);

  /* Schrift: Outfit, selbst gehostet */
  --font: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-text: 400;
  --fw-head: 600;           /* Prompt: 600. Bestand: 800 (Umschalter im Styleguide) */
  --fw-ui: 600;
  --fw-num: 800;
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.08rem + .25vw, 1.25rem);
  --fs-body: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --fs-small: .875rem;
  --fs-input: 1rem;         /* mindestens 16 px, sonst zoomt Safari beim Fokus */
  --lh-body: 1.7;
  --lh-head: 1.2;
  --tracking-head: -.01em;  /* leicht enger, nie gesperrt */
  --measure: 68ch;

  /* Abstände: 4-px-Raster */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem;
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1320px;

  /* Form: genau zwei Radien */
  --r-sm: .5rem;
  --r-lg: 1rem;

  /* Schatten: rot getönt, nur Karten und Navigation */
  --shadow-card: 0 0 0 1px rgba(33, 37, 41, .06), 0 .25rem .75rem rgba(33, 37, 41, .08), 0 1rem 2.5rem rgba(var(--brand-strong-rgb), .16);
  --shadow-card-hover: 0 0 0 1px rgba(33, 37, 41, .06), 0 .5rem 1rem rgba(33, 37, 41, .08), 0 1.25rem 3rem rgba(var(--brand-strong-rgb), .22);
  --shadow-nav: 0 1px 0 rgba(33, 37, 41, .07), 0 .375rem 1.25rem -.25rem rgba(33, 37, 41, .14);
  --shadow-nav-edge: 0 1px 0 rgba(33, 37, 41, .06), 0 .25rem .875rem -.375rem rgba(33, 37, 41, .14);
  --shadow-sheet: 0 1.25rem 2rem -1.25rem rgba(33, 37, 41, .35), 0 1px 0 rgba(33, 37, 41, .06);

  /* Maße */
  --nav-h: 64px;
  --tap: 48px;

  /* Bewegung */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-draw: 900ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --rise: 16px;
}

@media (min-width: 992px) {
  :root { --nav-h: 80px; }
}