:root{
  /* ================================
     WBS Wohnung Finder — Design Tokens
     ================================ */

  /* Base RGB definitions (for consistent alpha usage) */
  --wbs-black-rgb: 0,0,0;
  --wbs-white-rgb: 255,255,255;
  --wbs-ink-rgb: 11,15,26;
  --wbs-magenta-rgb: 255,0,208;
  --wbs-magenta-soft-rgb: 224,22,184;

  /* Shadow ink (used in some blocks that rely on a colder, slate-like shadow) */
  --wbs-slate-shadow-rgb: 15,23,42;

  /* Brand colors */
  --wbs-magenta: #FF00D0;
  --wbs-magenta-soft: #E016B8;

  /* Text */
  --wbs-ink: #0b0f1a;
  --wbs-text: var(--wbs-ink);

  /* Alpha helpers (ink) */
  --wbs-ink-a06: rgba(var(--wbs-ink-rgb), .06);
  --wbs-ink-a08: rgba(var(--wbs-ink-rgb), .08);
  --wbs-ink-a10: rgba(var(--wbs-ink-rgb), .10);
  --wbs-ink-a12: rgba(var(--wbs-ink-rgb), .12);
  --wbs-ink-a14: rgba(var(--wbs-ink-rgb), .14);
  --wbs-ink-a45: rgba(var(--wbs-ink-rgb), .45);
  --wbs-ink-a52: rgba(var(--wbs-ink-rgb), .52);
  --wbs-ink-a62: rgba(var(--wbs-ink-rgb), .62);
  --wbs-ink-a68: rgba(var(--wbs-ink-rgb), .68);
  --wbs-ink-a70: rgba(var(--wbs-ink-rgb), .70);
  --wbs-ink-a72: rgba(var(--wbs-ink-rgb), .72);
  --wbs-ink-a74: rgba(var(--wbs-ink-rgb), .74);
  --wbs-ink-a75: rgba(var(--wbs-ink-rgb), .75);
  --wbs-ink-a78: rgba(var(--wbs-ink-rgb), .78);
  --wbs-ink-a82: rgba(var(--wbs-ink-rgb), .82);
  --wbs-ink-a86: rgba(var(--wbs-ink-rgb), .86);
  --wbs-ink-a88: rgba(var(--wbs-ink-rgb), .88);

  /* Alpha helpers (pure black) */
  --wbs-black-a02: rgba(var(--wbs-black-rgb), .02);
  --wbs-black-a06: rgba(var(--wbs-black-rgb), .06);
  --wbs-black-a08: rgba(var(--wbs-black-rgb), .08);
  --wbs-black-a10: rgba(var(--wbs-black-rgb), .10);
  --wbs-black-a12: rgba(var(--wbs-black-rgb), .12);
  --wbs-black-a14: rgba(var(--wbs-black-rgb), .14);

  /* Alpha helpers (slate shadow ink) */
  --wbs-slate-shadow-a06: rgba(var(--wbs-slate-shadow-rgb), .06);
  --wbs-slate-shadow-a14: rgba(var(--wbs-slate-shadow-rgb), .14);
  --wbs-slate-shadow-a18: rgba(var(--wbs-slate-shadow-rgb), .18);

  /* Alpha helpers (brand magenta) */
  --wbs-magenta-a02: rgba(var(--wbs-magenta-rgb), .02);
  --wbs-magenta-a03: rgba(var(--wbs-magenta-rgb), .03);
  --wbs-magenta-a04: rgba(var(--wbs-magenta-rgb), .04);
  --wbs-magenta-a06: rgba(var(--wbs-magenta-rgb), .06);
  --wbs-magenta-a08: rgba(var(--wbs-magenta-rgb), .08);
  --wbs-magenta-a10: rgba(var(--wbs-magenta-rgb), .10);
  --wbs-magenta-a18: rgba(var(--wbs-magenta-rgb), .18);
  --wbs-magenta-a28: rgba(var(--wbs-magenta-rgb), .28);
  --wbs-magenta-a35: rgba(var(--wbs-magenta-rgb), .35);
  --wbs-magenta-a90: rgba(var(--wbs-magenta-rgb), .90);

  /* Alpha helpers (magenta-soft, used in some blocks) */
  --wbs-magenta-soft-a06: rgba(var(--wbs-magenta-soft-rgb), .06);
  --wbs-magenta-soft-a28: rgba(var(--wbs-magenta-soft-rgb), .28);

  /* Semantic text colors */
  --wbs-muted: var(--wbs-ink-a68);

  /* UI neutrals */
  --wbs-bg: #ffffff;
  --wbs-bg-soft: #f8f9fb;
  --wbs-line: var(--wbs-black-a08);
  --wbs-stroke: var(--wbs-black-a12);

  /* Neutral palette (semantic grays) */
  --wbs-gray-700: #555;
  --wbs-gray-600: #666;
  --wbs-gray-500: #999;

  /* Neutral palette (slate scale used in some blocks) */
  --wbs-slate-950: #0b1220;
  --wbs-slate-600: #475467;
  --wbs-slate-500: #6b7280;

  /* Surfaces / borders */
  --wbs-surface-soft: #eceaf2;
  --wbs-border-soft: #d8d5e6;

  /* Typography */
  --wbs-font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --wbs-font-serif: Lora, Georgia, "Times New Roman", serif;
  /* Type scale (centralized) */
  --wbs-type-h1: clamp(1.65rem, 2.3vw, 2.45rem);
  --wbs-type-h2: var(--wbs-type-h1);

  /* Layout */
  --wbs-container: 1120px;
  --wbs-wrap: min(var(--wbs-container), 96%);

  /* Radii */
  --wbs-radius-sm: 14px;
  --wbs-radius-md: 18px;
  --wbs-radius-card: 22px;
  --wbs-radius-lg: 24px;
  --wbs-radius-xl: 28px;

  /* Shadows */
  --wbs-shadow-soft: 0 10px 26px var(--wbs-ink-a08);
  --wbs-shadow-stage: 0 30px 70px var(--wbs-slate-shadow-a18);
  --wbs-shadow-card: 0 18px 45px var(--wbs-slate-shadow-a14);

  /* WP / external fixed bars (set by small JS in Demo.html) */
  --wpbar: 0px;

  /* =========================================================
     Spacing scale (global rhythm)
     Notes:
     - Additive only (does not change visuals).
     - Blocks may keep local --s-* tokens, but can gradually map to these.
     ========================================================= */
  --wbs-space-1: 4px;
  --wbs-space-2: 8px;
  --wbs-space-3: 12px;
  --wbs-space-4: 16px;
  --wbs-space-4-5: 18px;
  --wbs-space-5: 20px;
  --wbs-space-5-5: 22px;
  --wbs-space-6: 24px;
  --wbs-space-8: 32px;
  --wbs-space-10: 40px;
  --wbs-space-12: 48px;
  --wbs-space-16: 64px;
  --wbs-space-20: 80px;
  --wbs-space-24: 96px;

  /* Section spacing (vertical rhythm between blocks)
     Same value for all blocks → consistent distance between sections.
     (Visual behavior: responsive, but uniform across blocks.) */
  --wbs-section-pad: clamp(var(--wbs-space-12), 8vh, var(--wbs-space-20));

  /* Body typography (used for intro/subtitle lines across blocks) */
  --wbs-type-body: 1.05rem;
  --wbs-type-micro: 14px;
  --wbs-leading-body: 1.9;

  /* Common radii helpers */
  --wbs-radius-pill: 999px;

  /* Common fixed sizes (shared UI details) */
  --wbs-kicker-line-width: 52px;
  --wbs-kicker-line-height: 3px;

  /* =========================================================
     Semantic aliases (optional layer)
     Purpose: make future refactors easier without breaking existing blocks.
     ========================================================= */
  --wbs-color-bg: var(--wbs-bg);
  --wbs-color-bg-soft: var(--wbs-bg-soft);
  --wbs-color-text: var(--wbs-text);
  --wbs-color-muted: var(--wbs-muted);
  --wbs-color-line: var(--wbs-line);
  --wbs-color-stroke: var(--wbs-stroke);

  --wbs-color-accent: var(--wbs-magenta);
  --wbs-color-accent-soft: var(--wbs-magenta-soft);

}