/* ==========================================================================
   MaklerPress Design Tokens — DEV-018 Token Foundation
   Version: 1.33.0-dev
   Zweistufiges Token-System: System-Tokens (stabil) + Brand-Tokens (via Design-Tab).
   Beide werden von AssetLoader::inlineCssVariables() + BricksDesignSync gespiegelt.

   :where(:root) statt :root (DEV-020 Nacharbeit): Auf Bricks-Seiten definieren
   die Novamira/Bricks-Variablen (:root, Spezifität 0,1,0) dieselben Token-Namen —
   diese Datei lädt später und gewann bisher per Kaskade, war aber für 16px-Root
   kalibriert (Bricks-Root = 10px → alles schrumpfte auf 62,5 %). :where() senkt
   die Spezifität auf 0, damit die Bricks-Werte gewinnen; auf Nicht-Bricks-Seiten
   (PHP-Fallback-Templates, keine Bricks-Variablenausgabe) gilt diese Datei
   unverändert weiter.
   ========================================================================== */

:where(:root) {

	/* =====================================================================
	   SYSTEM-TOKENS — SPACING (fluid clamp, 360px → 1440px)
	   T-Shirt-Skala, 9 Stufen.
	   ===================================================================== */
	--mp-space-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);   /*  4–5 px  */
	--mp-space-xs:  clamp(0.5rem,  0.46rem + 0.19vw, 0.625rem);    /*  8–10 px */
	--mp-space-s:   clamp(0.75rem, 0.69rem + 0.28vw, 0.9375rem);   /* 12–15 px */
	--mp-space-m:   clamp(1rem,    0.92rem + 0.37vw, 1.25rem);      /* 16–20 px */
	--mp-space-l:   clamp(1.5rem,  1.375rem + 0.56vw, 1.875rem);   /* 24–30 px */
	--mp-space-xl:  clamp(2rem,    1.83rem + 0.74vw, 2.5rem);       /* 32–40 px */
	--mp-space-2xl: clamp(3rem,    2.75rem + 1.11vw, 3.75rem);      /* 48–60 px */
	--mp-space-3xl: clamp(4rem,    3.67rem + 1.48vw, 5rem);         /* 64–80 px */
	--mp-space-4xl: clamp(6rem,    5.5rem  + 2.22vw, 7.5rem);       /* 96–120 px */

	/* =====================================================================
	   SYSTEM-TOKENS — BODY TEXT (fluid, Basis --mp-text-m = 1rem)
	   Modulare Skala ~1.125.
	   ===================================================================== */
	--mp-text-2xs: 0.625rem;                                          /* 10 px  */
	--mp-text-xs:  0.75rem;                                           /* 12 px  */
	--mp-text-s:   0.875rem;                                          /* 14 px  */
	--mp-text-m:   1rem;                                              /* 16 px (Basis) */
	--mp-text-l:   clamp(1rem,    0.96rem + 0.19vw, 1.125rem);       /* 16–18 px */
	--mp-text-xl:  clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);       /* 18–20 px */
	--mp-text-2xl: clamp(1.25rem, 1.16rem + 0.37vw, 1.5rem);         /* 20–24 px */

	/* =====================================================================
	   SYSTEM-TOKENS — HEADINGS (fluid, Major Third ~1.25)
	   ===================================================================== */
	--mp-head-m:   clamp(1.5rem,   1.375rem + 0.56vw, 1.875rem);    /* 24–30 px */
	--mp-head-l:   clamp(1.875rem, 1.75rem  + 0.56vw, 2.25rem);     /* 30–36 px */
	--mp-head-xl:  clamp(2.25rem,  2rem     + 1.11vw, 3rem);         /* 36–48 px */
	--mp-head-2xl: clamp(3rem,     2.75rem  + 1.11vw, 3.75rem);      /* 48–60 px */
	--mp-head-3xl: clamp(3.75rem,  3.5rem   + 1.11vw, 4.5rem);       /* 60–72 px */
	--mp-head-4xl: clamp(4.5rem,   4rem     + 2.22vw, 6rem);          /* 72–96 px */

	/* Zentrale Preis-Schriftgröße für Karten-Kontexte (Listen-Karte UND
	   Map-Popup, Marker-Auftrag 2026-07): EINE Stelle steuert beide.
	   Bricks-Pendant: Global Variable mp-card-price-size (var-f30n3w). */
	--mp-card-price-size: var(--mp-head-m);

	/* =====================================================================
	   SYSTEM-TOKENS — STATUS-FARBEN (nicht editierbar, stabil)
	   ===================================================================== */
	--mp-status-success-color: #16a34a;
	--mp-status-error-color:   #dc2626;
	--mp-status-warning-color: #f59e0b;
	--mp-status-info-color:    #2563eb;

	/* =====================================================================
	   SYSTEM-TOKENS — RADIUS-SKALA
	   ===================================================================== */
	--mp-radius-s:    4px;
	--mp-radius-m:    8px;
	--mp-radius-l:    12px;
	--mp-radius-xl:   16px;
	--mp-radius-full: 9999px;

	/* =====================================================================
	   SYSTEM-TOKENS — KONTROLLEN (DEV-033 Such-Widget-Raster)
	   px statt rem: Diese Tokens existieren NICHT im Bricks-/Novamira-
	   Variablensatz, auf Bricks-Seiten gilt daher diese Datei (10px-Root —
	   rem-Werte würden dort auf 62,5 % schrumpfen).
	   ===================================================================== */
	--mp-control-height:    48px;  /* EINE Höhe für Selects/Inputs/Pills/Buttons */
	--mp-control-font-size: 14px;  /* EINE Schriftgröße für alle Widget-Kontrollen
	                                  (px: Bricks' fluides --mp-text-s wächst auf
	                                  ~17px und sprengte die Select-Breiten) */
	--mp-filter-gap:        16px;  /* EIN Rasterabstand im gesamten Such-Widget */

	/* =====================================================================
	   BRAND-TOKENS — Editierbar via Design-Tab, synct via BricksDesignSync.
	   Kanonischer Suffix: -color.
	   ===================================================================== */
	--mp-primary-color:        #1a56db;
	--mp-secondary-color:      #475569;
	--mp-bg-body-color:        #ffffff;
	--mp-bg-surface-color:     #f8fafc;
	--mp-bg-inverse-color:     #1a1c1e; /* dunkle Inverse-Fläche (Featured-Card, 4K-Füllstreifen) */
	--mp-text-body-color:      #1e293b;
	--mp-text-heading-color:   #0f172a;
	--mp-border-primary-color: #e2e8f0;
	--mp-shadow-color:         rgba(0, 0, 0, 0.1);
	--mp-link-color:           #1a56db;
	--mp-link-hover-color:     #1649c0;
	--mp-link-act-color:       #0f3da6;

	/* Font-Tokens (kein -color-Suffix per Spec) */
	--mp-font-heading: 'Poppins', system-ui, sans-serif;
	--mp-font-body:    'Poppins', system-ui, sans-serif;

	/* Composite: Schatten aus --mp-shadow-color */
	--mp-shadow:       0 4px 6px var(--mp-shadow-color);
	--mp-shadow-hover: 0 8px 25px var(--mp-shadow-color);

	/* =====================================================================
	   BACKWARDS-COMPAT-ALIASE (DEV-017 → DEV-018)
	   Referenzen in Core.css + Global Classes werden sukzessive migriert.
	   ===================================================================== */
	--mp-primary:       var(--mp-primary-color);
	--mp-primary-dark:  #1649c0;
	--mp-primary-light: #e8effe;
	--mp-secondary:     var(--mp-secondary-color);
	--mp-success:       var(--mp-status-success-color);
	--mp-warning:       var(--mp-status-warning-color);
	--mp-error:         var(--mp-status-error-color);

	/* Hintergründe (Alt-Namen zeigen auf Brand-Tokens) */
	--mp-bg:        var(--mp-bg-body-color);
	--mp-bg-alt:    var(--mp-bg-surface-color);
	--mp-bg-subtle: #f1f5f9;

	/* Text (Alt-Namen) */
	--mp-text:       var(--mp-text-body-color);
	--mp-text-muted: #64748b;
	--mp-text-light: #94a3b8;

	/* Rahmen (Alt-Namen) */
	--mp-border:       var(--mp-border-primary-color);
	--mp-border-focus: var(--mp-primary-color);

	/* Altname Spacing (8-Punkte-Raster) — auf Fluid-Tokens gemappt */
	--mp-space-1:  var(--mp-space-2xs);
	--mp-space-2:  var(--mp-space-xs);
	--mp-space-3:  var(--mp-space-s);
	--mp-space-4:  var(--mp-space-m);
	--mp-space-5:  clamp(1.25rem, 1.16rem + 0.37vw, 1.5625rem); /* 20–25 px */
	--mp-space-6:  var(--mp-space-l);
	--mp-space-8:  var(--mp-space-xl);
	--mp-space-10: var(--mp-space-2xl);
	--mp-space-12: var(--mp-space-3xl);
	--mp-space-16: var(--mp-space-4xl);
	--mp-space-20: clamp(5rem, 4.58rem + 1.85vw, 6.25rem);       /* 80–100 px */
	--mp-space-24: clamp(6rem, 5.5rem + 2.22vw, 7.5rem);          /* 96–120 px */

	/* Altname Typografie → neue Tokens.
	   Achtung: KEINE Selbstreferenzen (--mp-text-xs/-xl/-2xl hießen alt wie neu) —
	   `--x: var(--x)` ist per CSS-Spec zyklisch und macht die Variable ungültig/leer
	   (Bug der DEV-020-Nacharbeit: --mp-text-xl war dadurch überall leer). Die
	   echten Definitionen stehen bereits im BODY-TEXT-Block oben. */
	--mp-font:         var(--mp-font-body);
	--mp-font-display: var(--mp-font-heading);
	--mp-text-sm:      var(--mp-text-s);
	--mp-text-base:    var(--mp-text-m);
	--mp-text-lg:      var(--mp-text-l);
	--mp-text-3xl:     var(--mp-head-m);
	--mp-text-4xl:     var(--mp-head-l);

	/* Zeilenabstände */
	--mp-leading-tight:   1.25;
	--mp-leading-snug:    1.375;
	--mp-leading-normal:  1.5;
	--mp-leading-relaxed: 1.625;

	/* Altname Radien → neue Skala */
	--mp-radius-sm: var(--mp-radius-s);
	--mp-radius:    var(--mp-radius-m);
	--mp-radius-lg: var(--mp-radius-l);

	/* Altname Schatten */
	--mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--mp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
	--mp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
	--mp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

	/* Übergänge */
	--mp-transition-fast:   150ms ease;
	--mp-transition-base:   250ms ease;
	--mp-transition-slow:   400ms ease;
	--mp-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Z-Ebenen */
	--mp-z-base:    1;
	--mp-z-sticky:  100;
	--mp-z-overlay: 200;
	--mp-z-modal:   300;

	/* Layout */
	--mp-container-max: 1200px;
	--mp-container-pad: 1.5rem;

	/* Galerie */
	--mp-gallery-thumb-size: 80px;
	--mp-gallery-thumb-gap:  0.5rem;
	--mp-gallery-main-ratio: 56.25%; /* 16:9 */
}