/* Schriften: selbst gehostet (assets/fonts/fonts.css, wird vor dieser Datei per <link> geladen -- kein Google-Aufruf). */

:root {
  /* Color tokens */
  --c-bg:        #F7F3EC;   /* warm cream / off-white */
  --c-surface:   #FFFFFF;
  --c-ink:       #262220;   /* dark anthracite */
  --c-ink-soft:  #8A8078;   /* muted anthracite for secondary text */
  --c-accent:    #B5652F;   /* terracotta / bronze */
  --c-accent-2:  #8C4A22;   /* deeper terracotta for contrast text-on-accent */
  --c-accent-soft: #F0E0CE; /* light tint of accent */
  --c-border:    #E7DFD2;
  --c-line:      #EFE8DC;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* Radius scale */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-full: 999px;

  /* Shadow scale (subtle, not overdone) */
  --sh-sm: 0 1px 3px rgba(38,34,32,0.06);
  --sh-md: 0 6px 16px -6px rgba(38,34,32,0.14);
  --sh-lg: 0 14px 32px -14px rgba(38,34,32,0.22);

  /* Typography scale */
  --fs-eyebrow: 11.5px;
  --fs-h1: 27px;
  --fs-h2: 20px;
  --fs-cat-name: 14.5px;
  --fs-meta: 12px;
  --fs-price: 14.5px;
  --fs-desc: 12.5px;

  /* Schrift-Stacks: hinter der Hauptschrift stehen Schrift-Fallbacks fuer
     Zeichen, die diese nicht enthaelt (Griechisch/Kyrillisch bei reinen
     Latin-Serifen: Source Serif 4; Arabisch: Noto Naskh/Sans Arabic). Sie
     werden per unicode-range nur geladen, wenn solche Zeichen vorkommen --
     lateinischer Text sieht unveraendert aus. Siehe auch theme.js. */
  --font-display: 'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif;
  --font-body: 'Inter', 'Noto Sans Arabic', sans-serif;

  /* Hero/Branding-Stellschrauben -- bewusst als eigene Variablen ausgelagert
     als Basis fuer die spaeter geplanten Design-Presets (Modern/Elegant/
     Klassisch). Aktuell gibt es noch keine Presets/Theme-Auswahl -- diese
     Variablen sind einzig dafuer da, dass ein spaeteres Preset Groesse,
     Kontrast und Bildaufhellung des Hero anpassen kann, ohne die
     Layout-Regeln in base.css oder die Logik in guest.js anfassen zu
     muessen. --hero-overlay-* werden von guest.js (renderHeader) per
     getComputedStyle ausgelesen und zu einem Gradient ueber dem Hero-Foto
     zusammengesetzt. */
  --hero-min-height: 230px;
  --hero-logo-height: 44px;
  --hero-logo-max-width: 112px;
  --hero-name-size: clamp(13px, 3.6vw, 15.5px);
  --hero-overlay-top: rgba(20, 16, 12, 0.55);
  --hero-overlay-mid: rgba(20, 16, 12, 0.08);
  --hero-overlay-bottom: rgba(20, 16, 12, 0.6);

  /* Logo-Integration im Hero (siehe base.css: .logo-slot.has-image) -- rein
     lokale, weiche Uebergangshilfen, unabhaengig von Logoform/-transparenz.
     Noch keine Presets, aber schon jetzt austauschbar. */
  --hero-logo-vignette-color: rgba(20, 16, 12, 0.42);
  --hero-logo-vignette-spread: 30px;
  --hero-logo-shadow: 0 2px 8px rgba(20, 16, 12, 0.4);

  /* Logoform (siehe Restaurantprofil im Admin: restaurant.logoShape) --
     "rund" braucht keinen eigenen Radius-Token (50% ist per Definition
     rund). "Viereck"/"Rechteck" teilen sich denselben dezenten Radius,
     damit beide gleich "weich abgerundet" statt App-Icon-artig wirken.
     Breite je Form bewusst als Vielfaches von --hero-logo-height statt
     ueber die CSS-Eigenschaft aspect-ratio (die in Kombination mit
     Flex-Items/object-fit in manchen Browsern zu einer falsch berechneten,
     am Inhalt statt an der Box orientierten Breite fuehren kann) --
     --hero-logo-rectangle-ratio ist eine reine Zahl fuer calc(), kein
     aspect-ratio-Wert. */
  --hero-logo-radius-soft: 12px;
  --hero-logo-rectangle-ratio: 2;

  /* =====================================================================
     DESIGN-PRESET-TOKENS (siehe src/shared/themes.css und theme.js)
     Die Werte hier sind die des Presets "Modern" = das bisherige Gastdesign;
     sie gelten auch dort, wo kein data-theme gesetzt ist (z.B. Admin).
     Die abgeleiteten Tokens am Ende stehen zusaetzlich in themes.css unter
     ":root, [data-theme]", damit sie an jedem Element mit data-theme (z.B.
     der Admin-Vorschau) aus den dortigen Farben neu berechnet werden.
     ===================================================================== */
  --c-card:        #FFFFFF;   /* Kartenflaeche: Gerichte, Reiter, Zurueck-Button */
  --c-on-accent:   #FFFFFF;   /* Text/Icon auf Akzentflaechen */
  --c-accent-icon: var(--c-accent); /* Akzent als Icon/Fokusring */
  --c-text-body:   #625a53;   /* Beschreibungen, Legende, Hinweise */
  --c-text-meta:   #A3A19B;   /* Allergen-Nummern */
  --c-text-faint:  #C2C0B9;   /* Footer */
  --c-tab-ink:     #6F6A63;   /* inaktiver Unterkategorie-Reiter */
  --c-bookmark:    #C2BFB6;   /* nicht gemerktes Lesezeichen */
  --c-hover:        rgba(0, 0, 0, 0.05);
  --c-hover-strong: rgba(0, 0, 0, 0.04);

  --card-radius:  var(--r-lg);   /* Kategorie-Karten */
  --dish-radius:  18px;          /* Gericht-Karten */
  --thumb-radius: 14px;          /* Gericht-/Kategorie-Bildchen */
  --chip-radius:  var(--r-full); /* Filter-Chips, Widgets */
  --tab-radius:   18px;          /* Unterkategorie-Reiter */
  --search-radius: var(--r-full);
  --sheet-radius: 24px 24px 0 0;
  --card-border:  none;
  --card-shadow:       var(--sh-md);
  --card-shadow-hover: var(--sh-lg);
  --dish-shadow: 0 10px 22px -12px rgba(20, 20, 20, 0.14), 0 2px 6px rgba(20, 20, 20, 0.03);
  --dish-thumb:  58px;
  --font-dish:   var(--font-body);
  --hero-name-tracking: 0.03em;
}