/* ============================================================
   FFConnect — Design Tokens
   Freiwillige Feuerwehr Winklarn
   Alle Werte als CSS Custom Properties — 1:1 nach Elementor
   (Site Settings → Global Colors / Custom CSS) übersetzbar.
   ============================================================ */

:root {
  /* ---------- Brand-Farben ---------- */
  --c-red:          #C8102E;  /* Primärrot (RAL-3000-inspiriert) */
  --c-red-dark:     #8B0F1F;  /* Dunkelrot — Hover, Tiefe */
  --c-red-darker:   #6A0B18;  /* aktive States */
  --c-black:        #0E0F12;  /* Headlines, Hero-Backgrounds */
  --c-yellow:       #FFC72C;  /* Akzentgelb — Warntag, sparsam */
  --c-offwhite:     #F4F5F7;  /* Section-Backgrounds */
  --c-gray:         #6E7079;  /* sekundärer Text */

  /* ---------- Neutrale Skala (abgeleitet) ---------- */
  --c-ink:          #0E0F12;  /* Haupttext auf Hell */
  --c-ink-2:        #34363C;  /* etwas weicher */
  --c-muted:        #6E7079;  /* sekundär */
  --c-muted-2:      #9A9CA3;  /* tertiär / Captions */
  --c-line:         #E3E5E9;  /* Trennlinien */
  --c-line-2:       #D2D5DB;  /* kräftiger */
  --c-surface:      #FFFFFF;  /* Cards, Default */
  --c-surface-2:    #F4F5F7;  /* Section-BG hell */
  --c-surface-3:    #ECEEF2;  /* gedeckter */
  --c-on-dark:      #F4F5F7;  /* Text auf Dunkel */
  --c-on-dark-mut:  #A7AAB2;  /* sekundär auf Dunkel */
  --c-dark-line:    #2A2C33;  /* Linie auf Dunkel */
  --c-dark-surface: #17181C;  /* Card auf Dunkel */

  /* ---------- Semantische Status / Einsatzarten ---------- */
  /* Einsatzart-Codierung (Tags) */
  --c-brand:        #C8102E;  /* Brand = rot */
  --c-brand-bg:     #FCE8EB;
  --c-tech:         #1F6FB2;  /* Technisch = blau */
  --c-tech-bg:      #E6F0F8;
  --c-hazmat:       #9A6B00;  /* Schadstoff = gelb/ocker (AA-fähig) */
  --c-hazmat-bg:    #FBF1D6;
  --c-drill:        #5C5E66;  /* Übung = grau */
  --c-drill-bg:     #ECEEF2;
  --c-misc:         #4A4C53;  /* Sonstige */
  --c-misc-bg:      #ECEEF2;

  /* Fahrzeug- / System-Status */
  --c-ok:           #1E7F45;  /* einsatzbereit */
  --c-ok-bg:        #E4F3EA;
  --c-warn:         #9A6B00;  /* in Wartung */
  --c-warn-bg:      #FBF1D6;
  --c-defect:       #8B0F1F;  /* defekt */
  --c-defect-bg:    #FCE8EB;
  --c-info:         #1F6FB2;
  --c-info-bg:      #E6F0F8;

  /* Fehlalarm / gedeckt */
  --c-quiet:        #6E7079;
  --c-quiet-bg:     #ECEEF2;

  /* ---------- Typografie ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* Type-Scale (fluid, 1.20–1.25 Ratio) */
  --fs-eyebrow: 0.8125rem;                          /* 13px Label/Uppercase */
  --fs-sm:      0.875rem;                            /* 14px */
  --fs-base:    1.0625rem;                           /* 17px Fließtext */
  --fs-lg:      1.1875rem;                           /* 19px Lead */
  --fs-h4:      clamp(1.1rem, 1.0rem + 0.4vw, 1.3rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --fs-h2:      clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-display: clamp(2.3rem, 1.4rem + 3.2vw, 3.6rem);
  --fs-counter: clamp(2.2rem, 1.5rem + 2.2vw, 3rem);

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.6;

  --ls-eyebrow: 0.12em;
  --ls-tight:   -0.02em;
  --ls-tighter: -0.03em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-heavy:   900;

  /* ---------- Spacing-Skala (4px-Basis) ---------- */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  2.5rem;    /* 40 */
  --sp-8:  3rem;      /* 48 */
  --sp-9:  4rem;      /* 64 */
  --sp-10: 5rem;      /* 80 */
  --sp-11: 6.5rem;    /* 104 */

  /* Section-Rhythmus (responsive) — kompakter, damit nicht zu klobig */
  --section-y: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);

  /* ---------- Layout ---------- */
  --container:    1320px;   /* breiter, damit auf 1440+ nicht so eingedrueckt wirkt */
  --container-nar: 760px;   /* Lesetext (News/Bericht) */
  --gutter:       clamp(1rem, 0.5rem + 1.5vw, 2rem);

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- Schatten (3 Stufen: rest / hover / elevated) ---------- */
  --sh-rest:     0 1px 2px rgba(14,15,18,0.06), 0 1px 1px rgba(14,15,18,0.04);
  --sh-hover:    0 8px 22px -8px rgba(14,15,18,0.18), 0 2px 6px rgba(14,15,18,0.06);
  --sh-elevated: 0 20px 48px -16px rgba(14,15,18,0.28), 0 4px 12px rgba(14,15,18,0.08);
  --sh-focus:    0 0 0 3px rgba(31,111,178,0.45);  /* Fokus-Ring (AA, blau) */
  /* Avatar: 1px-Ring + weicher Drop (klein = Grid, lg = Detail-Profil) */
  --sh-avatar:    0 0 0 1px var(--c-line), 0 6px 14px -8px rgba(14,15,18,0.35);
  --sh-avatar-lg: 0 0 0 1px var(--c-line), 0 12px 26px -14px rgba(14,15,18,0.5);
  --sh-ring:      0 0 0 1px var(--c-line);

  /* ---------- Motion ---------- */
  --t-fast: 120ms cubic-bezier(0.4,0,0.2,1);
  --t-base: 200ms cubic-bezier(0.4,0,0.2,1);
  --t-slow: 320ms cubic-bezier(0.4,0,0.2,1);

  /* ---------- Z-Index ---------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---------- Gefahrenstreifen (dezent) ---------- */
  --stripe-yellow: repeating-linear-gradient(
      -45deg, var(--c-yellow) 0 10px, var(--c-black) 10px 20px);
  --stripe-red: repeating-linear-gradient(
      -45deg, var(--c-red) 0 10px, #ffffff 10px 20px);
}