/* ============================================================
   Design Tokens — Core (tier-neutral)
   Spacing, typography, layout, shadows.
   Colors and fonts are set by tier/{default|basic|pro}/variables.css
   Customer overrides go in 99-theme.css.
   ============================================================ */

:root {

  /* --- Spacing scale (abstract, do not use directly in components) --- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-8:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-12: 6rem;      /* 96 */

  /* --- Semantic spacing (use these in components) --- */
  --gap-inline:   var(--space-4);
  --gap-block:    var(--space-5);
  --gap-section:  var(--space-8);
  --padding-page: var(--space-5);
  --padding-card: var(--space-2);

  /* --- Border radius (overridden by tier) --- */
  --radius:      var(--space-2);   /*  8px */
  --radius-lg:   var(--space-3);   /* 12px */
  --radius-xl:   var(--space-4);   /* 16px */
  --radius-2xl:  var(--space-5);   /* 24px */
  --radius-pill: 999px;
  /* --btn-radius und --btn-padding: pro Tier definieren
     (siehe tier/{default,basic,pro}/variables.css). */

  /* --- Typography (fonts overridden by tier) --- */
  --font-base:   'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: Georgia, 'Times New Roman', serif;

  --font-body:    var(--font-base);
  --font-heading: var(--font-accent);
  --font-nav:     var(--font-base);
  --font-button:  var(--font-base);

  --tracking:      0.15em;
  --tracking-wide: 0.25em;

  --text-2xs:  0.625rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 0.95rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;

  --leading:         1.6;
  --leading-heading: 1.2;
  --leading-tight:   1.3;

  /* --- Colors (fallbacks — tier overrides these) --- */
  --color-primary:       hsl(216, 70%, 25%);
  --color-primary-hover: hsl(216, 70%, 18%);
  --color-accent:        hsl(216, 80%, 45%);
  --color-accent-hover:  hsl(216, 80%, 38%);

  /* Komplementaerfarbe (3. Markenfarbe). Fallback = bestehende Accent-Farbe,
     damit nicht-migrierte Tiers/Kunden weiter eine sinnvolle Farbe haben.
     Pro Tier/Kunde mit eigenem (Split-)Complement ueberschreibbar.
     Verwendung: dekorative Akzente, sekundaere CTAs (.btn.complement),
     getoente Section-BGs (--color-complement-soft), Status/Charts. */
  --color-complement:       var(--color-accent);
  --color-complement-hover: var(--color-accent-hover);
  --color-complement-soft:  color-mix(in srgb, var(--color-complement) 12%, transparent);

  --color-text:         hsl(0, 0%, 13%);
  /* WCAG AA Kontrast (≥4.5:1) gegen --color-bg / --color-bg-alt:
     muted = 6.5:1, light = 5.4:1. Im Footer (dunkler BG) werden diese
     Variablen via #footer-Scope mit hellen Werten überschrieben. */
  --color-text-muted:   hsl(220, 9%, 38%);
  --color-text-light:   hsl(220, 9%, 45%);
  --color-text-inverse: hsl(0, 0%, 100%);

  --color-bg:      hsl(0, 0%, 100%);
  --color-bg-alt:  hsl(0, 0%, 97%);
  --color-bg-dark: hsl(0, 0%, 12%);

  --color-topbar:      hsl(0, 0%, 20%);
  --color-topbar-text: hsl(0, 0%, 100%);

  --color-border:       hsl(0, 0%, 90%);
  --color-border-alt:  hsl(0, 0%, 94%);
  --color-border-dark:  hsl(0, 0%, 82%);
  --color-panel-border: var(--color-border-alt);   /* Border um .panel-Container, tier-überschreibbar */

  --color-error:   hsl(0, 72%, 51%);
  --color-success: hsl(142, 72%, 37%);
  --color-icon:    var(--color-text-muted);
  --color-warning: hsl(38, 92%, 50%);
  --color-heart:   hsl(0, 76%, 57%);   /* Favorites heart, remove-button, fav-counter */

  /* --- Layout --- */
  --content-width: 95rem;      /* Site-Breite: Card-Grids, Home, Listings */
  --width-narrow:  52rem;      /* Schmale Content-Seiten: Contact, Impressum, Newsletter, Calculator */
  --sidebar-width: 20rem;
  --topbar-height: 2.5rem;
  --header-height: 3.5rem;
  /* Side-Inset für full-width Container (Header, Hero) damit ihre inneren
     Items (Logo, Nav) bündig zur max-width:content-width Content-Box stehen.
     Wenn viewport ≤ content-width: nur padding-page. Wenn breiter: zusätzlicher
     Inset gleicht die Auto-Margin der Content-Box aus. */
  --header-inset: max(var(--padding-page), calc((100vw - var(--content-width)) / 2 + var(--padding-page)));

  /* Sticky-Offset: aktuelle Header-Höhe in px, von header.js bei Scroll geupdatet
     (0 wenn Header weggeblendet). Default = volle Header-Höhe für initiales Layout
     bevor JS gefeuert hat. */
  --sticky-offset: var(--header-height);

  /* Inline-Icons (SVG in Text) — vertikaler Offset zur Baseline-Korrektur.
     Heading-Fonts haben oft höhere x-/cap-Höhe → Icons "schweben" optisch zu
     hoch. Pro Tier kann den Wert in tier/{name}/variables.css überschreiben. */
  --inline-icon-y: 0;

  /* --- Header module order (overridable per tier) --- */
  --order-contact-bar: 1;
  --order-service-nav: 2;
  --order-brand:       3;
  --order-nav:         4;

  /* --- Transitions --- */
  --transition:      150ms ease;   /* Default: Color/Opacity/kleine UI-Micro-Interactions */
  --transition-med:  200ms ease;   /* Transform/Scale/Hover-Feedback */
  --transition-slow: 300ms ease;   /* Layout-Changes, Dropdowns, Compact-Mode */
  --transition-slower: 800ms ease; /* Betonte, weiche Farb-/Flächen-Wechsel */

  /* --- Overlay / Scrim (halbtransparentes Schwarz in 4 Stufen) --- */
  --scrim-light:  hsl(0 0% 0% / 0.4);
  --scrim:        hsl(0 0% 0% / 0.5);
  --scrim-medium: hsl(0 0% 0% / 0.6);
  --scrim-heavy:  hsl(0 0% 0% / 0.8);

  /* --- Glass (halbtransparentes Weiß) — naming analog zu scrim:
     faint < subtle < soft < light < (default) < medium < heavy < solid.
     Niedrige Stufen für Tints/Borders auf dunklem BG (z.B. Dialog-Tabs),
     hohe Stufen für Glass-Backgrounds (Header-Dropdowns etc.). */
  --glass-faint:  hsl(0 0% 100% / 0.08);
  --glass-subtle: hsl(0 0% 100% / 0.12);
  --glass-soft:   hsl(0 0% 100% / 0.2);
  --glass-light:  hsl(0 0% 100% / 0.4);
  --glass:        hsl(0 0% 100% / 0.5);
  --glass-medium: hsl(0 0% 100% / 0.6);
  --glass-heavy:  hsl(0 0% 100% / 0.8);
  --glass-solid:  hsl(0 0% 100% / 0.95);

  --overlay-bg:   var(--scrim);
  --overlay-blur: 0.25rem;

  /* --- Shadows --- */
  --shadow-sm: 0 0.0625rem 0.125rem hsl(0 0% 0% / 0.05);
  --shadow:    0 0.0625rem 0.1875rem hsl(0 0% 0% / 0.1),
               0 0.0625rem 0.125rem hsl(0 0% 0% / 0.06);
  --shadow-lg: 0 0.625rem 0.9375rem hsl(0 0% 0% / 0.1),
               0 0.25rem 0.375rem hsl(0 0% 0% / 0.05);
  --shadow-xl: 0 0.75rem 1.75rem hsl(0 0% 0% / 0.18);
}

/* --- Breakpoints (reference, used in @media rules) ---
   Mobile:             < 45rem    (720px)
   Tablet Portrait:   45 – 79.5rem (portrait)
   Tablet Landscape:  45 – 79.5rem (landscape)
   Desktop:           >= 79.5rem  (1272px)
   ---------------------------------------------------- */