/* ==========================================================================
   Weblandschaften — Design Tokens v1  ·  Stand 2026-06-23
   Marke: Weblandschaften (ein Unternehmen der Werbelandschaften UG, Bremen)
   Fonts: Sora (Display) + Inter (Body) — in Produktion SELBST HOSTEN (DSGVO).
   ========================================================================== */

:root {
  /* --- Markenfarben ------------------------------------------------------ */
  --wl-horizont:      #102A43; /* Primär / Trust — Header, Headlines, dunkle Sektionen */
  --wl-horizont-700:  #1B3A5B; /* Hover/Tiefe auf Horizont-Blau */
  --wl-horizont-900:  #0B1B2B; /* Tiefster Ton / Footer */

  --wl-blue:          #2563EB; /* Aktion / Links / sekundäre Buttons */
  --wl-blue-700:      #1D4ED8;
  --wl-blue-50:       #EAF1FE; /* helle Blau-Fläche */

  --wl-green:         #19C37D; /* Signal / Wachstum / Primär-CTA / Erfolg */
  --wl-green-700:     #0F9E64; /* CTA Hover */
  --wl-green-50:      #E6F8F0; /* helle Grün-Fläche */

  --wl-ink:           #0F172A; /* Fließtext */
  --wl-slate:         #475569; /* Sekundärtext / Captions */
  --wl-slate-300:     #94A3B8; /* Hilfstext auf dunkel */
  --wl-fog:           #F4F6F9; /* Sektions-Hintergründe */
  --wl-line:          #E2E8F0; /* Rahmen / Trenner */
  --wl-white:         #FFFFFF;

  --wl-endorser:      #1C2733; /* Werbelandschaften-Endorser-Ton (dezent) */

  /* --- Semantische Aliase ------------------------------------------------ */
  --wl-bg:            var(--wl-white);
  --wl-bg-alt:        var(--wl-fog);
  --wl-bg-invert:     var(--wl-horizont);
  --wl-text:          var(--wl-ink);
  --wl-text-muted:    var(--wl-slate);
  --wl-text-invert:   var(--wl-white);
  --wl-primary:       var(--wl-horizont);
  --wl-accent:        var(--wl-green);  /* CTAs */
  --wl-link:          var(--wl-blue);
  --wl-border:        var(--wl-line);
  --wl-success:       var(--wl-green);
  --wl-danger:        #E24B4A;
  --wl-warning:       #EF9F27;

  /* --- Typografie -------------------------------------------------------- */
  --wl-font-display:  "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wl-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wl-font-mono:     "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --wl-text-xs:   0.75rem;   /* 12 */
  --wl-text-sm:   0.875rem;  /* 14 */
  --wl-text-base: 1rem;      /* 16 */
  --wl-text-lg:   1.25rem;   /* 20 */
  --wl-text-xl:   1.563rem;  /* 25 */
  --wl-text-2xl:  1.953rem;  /* 31 */
  --wl-text-3xl:  2.441rem;  /* 39 */
  --wl-text-4xl:  3.052rem;  /* 49 */

  --wl-leading-tight:  1.15;
  --wl-leading-normal: 1.6;
  --wl-tracking-tight: -0.02em;
  --wl-tracking-wide:  0.08em;

  --wl-weight-regular: 400;
  --wl-weight-medium:  500;
  --wl-weight-semibold:600;
  --wl-weight-bold:    700;

  /* --- Spacing (8pt-Raster) ---------------------------------------------- */
  --wl-space-1:  0.25rem;  --wl-space-2:  0.5rem;   --wl-space-3:  0.75rem;
  --wl-space-4:  1rem;     --wl-space-6:  1.5rem;   --wl-space-8:  2rem;
  --wl-space-12: 3rem;     --wl-space-16: 4rem;     --wl-space-24: 6rem;

  /* --- Radius ------------------------------------------------------------ */
  --wl-radius-sm:   6px;
  --wl-radius-md:   10px;
  --wl-radius-lg:   16px;
  --wl-radius-xl:   24px;
  --wl-radius-pill: 999px;

  /* --- Schatten ---------------------------------------------------------- */
  --wl-shadow-sm: 0 1px 2px rgba(16,42,67,0.06);
  --wl-shadow-md: 0 6px 20px rgba(16,42,67,0.08);
  --wl-shadow-lg: 0 18px 48px rgba(16,42,67,0.12);

  /* --- Layout ------------------------------------------------------------ */
  --wl-container: 1200px;
  --wl-container-narrow: 760px;
}