/* === MICROBEADS AG – Design Tokens ===
   Designsystem: Schweizer Industrie-Look, Schwarz/Weiss/Rot.
   Primär-Akzent ist das Signalrot aus dem Logo (#E30713).
   Hinweis: Variablennamen --color-blue/--color-orange bleiben aus
   Kompatibilitätsgründen bestehen; ihre WERTE sind umgestellt. So
   erbt der gesamte bestehende Rumler-Style automatisch das neue
   Farbschema, ohne dass 200+ Stellen angefasst werden müssen.
*/
:root {
    /* ── Farben ── */
    --color-red:        #E30713;   /* Logo-Rot, Primär-Akzent */
    --color-orange:     #E30713;   /* Alias → Rot (ehem. Rumler-Orange) */
    --color-blue:       #15141C;   /* Alias → Dunkel (ehem. Rumler-Blau) */
    --color-dark:       #15141C;
    --color-bg:         #F9F9F9;
    --color-white:      #ffffff;
    --color-gray-100:   #f3f4f6;
    --color-gray-200:   #e5e7eb;
    --color-gray-400:   #9ca3af;
    --color-gray-600:   #4b5563;

    /* ── Schriften ──
       Lato          → H1, Display
       Space Grotesk → H2, H3, Fliesstext
       Inter         → Navigation, Labels
    ── */
    --font-display: 'Lato', sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body:    'Space Grotesk', sans-serif;
    --font-nav:     'Inter', sans-serif;

    /* ── Type Scale ── */
    --fs-hero:   clamp(2.25rem, 4vw, 3.75rem);
    --fs-h2:     clamp(1.75rem, 2.5vw, 2.5rem);
    --fs-h3:     clamp(1.25rem, 2vw, 1.625rem);
    --fs-h4:     1.125rem;
    --fs-body:   1rem;
    --fs-small:  0.875rem;
    --fs-xs:     0.75rem;

    /* ── Abstände ── */
    --max-width:  1600px;
    --px:         clamp(1rem, 2.5vw, 2.5rem);

    /* ── Übergänge ── */
    --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

    /* ── Schatten ── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
}