/* ==========================================================================
   halal-reisen — Design-Tokens (Task 13)

   Die EINZIGE Quelle fuer Farben, Schrift, Abstaende, Radien und Schatten.
   Neue Regeln greifen bitte immer auf diese Variablen zu und schreiben keine
   Rohwerte — nur so bleibt das Design aenderbar.

   Eigene Klassen tragen das Praefix `hr-`, damit sie sich nie mit dem
   Fremdmarkup von halalbooking.com beissen (siehe docs/besonderheiten.md §1).
   ========================================================================== */

:root {

  /* --- Marke -------------------------------------------------------------
     Farbwelt "Ruhiges Gruen & Sand". Kontraste sind gemessen, nicht geschaetzt:
       Primaer auf Weiss ........ 5,32:1  (AA)
       Weiss auf Primaer ........ 5,32:1  (AA)
       Text auf Flaeche ........ 16,30:1  (AAA)
       Weiss auf Dunkel ........ 12,21:1  (AAA)
       Text auf Akzent .......... 9,18:1  (AAA)
     ACHTUNG: Der Akzent hat auf Weiss nur 1,9:1 — er ist eine FLAECHEN-Farbe.
     Niemals goldenen Text auf hellem Grund setzen.                        */
  --hr-primary:         #0F7A5A;
  --hr-primary-hover:   #0C6349;
  --hr-primary-active:  #0A5340;
  --hr-primary-soft:    #E7F2ED;   /* zarte Flaeche, z. B. aktiver Filter    */

  --hr-dark:            #0A3D2E;   /* Kopfzeile, Ueberschriften              */
  --hr-dark-soft:       #12513C;

  --hr-accent:          #E8B44A;   /* Badges, Preise — immer mit dunklem Text */
  --hr-accent-soft:     #FBF1DC;

  /* --- Flaechen & Linien ------------------------------------------------ */
  --hr-bg:              #FAF7F2;   /* Seitenhintergrund (Sand hell)          */
  --hr-surface:         #FFFFFF;   /* Karten, Formularfelder                 */
  --hr-surface-sunken:  #F3EFE8;   /* abgesetzte Bereiche                    */
  --hr-border:          #E5DED3;
  --hr-border-strong:   #CFC5B6;

  /* --- Text ------------------------------------------------------------- */
  --hr-text:            #1A1A18;
  --hr-text-muted:      #5B584F;   /* auf --hr-bg: 6,65:1 — AA auch klein    */
  --hr-text-subtle:     #7A776D;   /* nur fuer grosse/unkritische Schrift    */
  --hr-text-on-dark:    #FFFFFF;

  /* --- Semantisch ------------------------------------------------------- */
  --hr-success:         #157347;
  --hr-warning:         #9A6B00;
  --hr-danger:          #B3261E;
  --hr-danger-soft:     #FCEDEC;

  /* --- Schrift ----------------------------------------------------------
     Inter, selbst gehostet (public/frontend/fonts/inter/). Bewusst KEIN
     Google-CDN — dieselbe Begruendung wie beim selbst gehosteten
     Markerclusterer, siehe docs/besonderheiten.md §7.
     Der Fallback deckt Tuerkisch auf jedem System ab.                     */
  --hr-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  /* Fliessende Groessen: skalieren zwischen 375px und 1440px Viewport,
     damit es keine Sprünge an den Breakpoints gibt.                        */
  --hr-text-xs:   0.75rem;                              /* 12px  Labels     */
  --hr-text-sm:   0.875rem;                             /* 14px  Hilfstext  */
  --hr-text-base: 1rem;                                 /* 16px  Fliesstext */
  --hr-text-lg:   clamp(1.0625rem, 0.99rem + 0.31vw, 1.1875rem);
  --hr-text-xl:   clamp(1.25rem,   1.14rem + 0.47vw,  1.5rem);
  --hr-text-2xl:  clamp(1.5rem,    1.31rem + 0.81vw,  2rem);
  --hr-text-3xl:  clamp(1.875rem,  1.52rem + 1.5vw,   2.75rem);

  --hr-leading-tight: 1.2;
  --hr-leading-snug:  1.4;
  --hr-leading:       1.6;

  --hr-weight-normal:   400;
  --hr-weight-medium:   500;
  --hr-weight-semibold: 600;
  --hr-weight-bold:     700;

  /* --- Abstaende (4px-Raster) ------------------------------------------- */
  --hr-space-1:  0.25rem;   /*  4px */
  --hr-space-2:  0.5rem;    /*  8px */
  --hr-space-3:  0.75rem;   /* 12px */
  --hr-space-4:  1rem;      /* 16px */
  --hr-space-5:  1.5rem;    /* 24px */
  --hr-space-6:  2rem;      /* 32px */
  --hr-space-7:  3rem;      /* 48px */
  --hr-space-8:  4rem;      /* 64px */

  /* Vertikaler Rhythmus zwischen Seitenabschnitten */
  --hr-section-y: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  /* --- Radien ------------------------------------------------------------ */
  --hr-radius-sm:   6px;
  --hr-radius:      10px;
  --hr-radius-lg:   16px;
  --hr-radius-full: 999px;

  /* --- Schatten ----------------------------------------------------------
     Sehr zurueckhaltend — Tiefe entsteht vor allem ueber Flaeche und Linie. */
  --hr-shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.06);
  --hr-shadow:    0 2px 8px rgba(26, 26, 24, 0.08);
  --hr-shadow-lg: 0 8px 28px rgba(26, 26, 24, 0.12);

  /* --- Sonstiges --------------------------------------------------------- */
  --hr-container:   1240px;
  --hr-transition:  160ms ease;
  --hr-focus-ring:  0 0 0 3px rgba(15, 122, 90, 0.35);

  /* Mindestgroesse fuer Tap-Ziele (WCAG 2.5.5) */
  --hr-tap: 44px;
}

/* --- Breakpoints ----------------------------------------------------------
   Vier statt der bisherigen neun (420/540/570/767/768/1023/1064/1199/1224).
   Media Queries koennen keine CSS-Variablen nutzen, deshalb stehen die Werte
   in den Regeln — hier als verbindliche Referenz:

     (bis 767px)              Smartphone   — Basis, mobile-first
     @media (min-width:768px)  Tablet       md
     @media (min-width:1064px) Desktop      lg
     @media (min-width:1280px) gross        xl

   1064px ist NICHT frei waehlbar: An genau diesem Wert haengt die Umschaltung
   zwischen Desktop-Karte und mobilem Karten-Modal. Ein anderer Wert holt den
   in Task 07 behobenen Fehler zurueck (docs/besonderheiten.md §2a).
   -------------------------------------------------------------------------- */