/**
 * Unternehmensportal — Design-Tokens
 *
 * Die technische Umsetzung des Design-Systems aus docs/design-system.md.
 * Diese Datei wird VOR public.css eingebunden und stellt die `--up-*`-
 * Variablen bereit. public.css darf ihre eigenen Alt-Tokens
 * (--up-primary, --up-gray-*) behalten, bis die Komponenten einzeln
 * auf die neuen Rollen migriert sind (siehe design-system.md §9).
 *
 * Quelle: Live-Scan von ausbildung-rhwd.de/messe/* vom 2026-11-11.
 */

:root {

    /* ===== 1. Core-Palette ===== */

    --up-color-navy-900:   #0D1525;
    --up-color-navy-800:   #1F2A44;
    --up-color-blue-700:   #004E9E;
    --up-color-blue-600:   #1A6FB0;
    --up-color-cyan-500:   #009EE3;
    --up-color-cyan-400:   #4DA2DF;
    --up-color-cyan-300:   #6EC1E4;

    /* ===== 2. Erweiterte Palette ===== */

    --up-color-violet-600: #41328B;
    --up-color-magenta-600:#941680;
    --up-color-yellow-500: #FFCC00;
    --up-color-amber-500:  #F9B000;
    --up-color-red-600:    #E40038;
    --up-color-green-500:  #28A745;

    /* ===== 3. Neutrale ===== */

    --up-color-white:      #FFFFFF;
    --up-color-gray-50:    #F8F9FA;
    --up-color-gray-75:    #F5F7FA;
    --up-color-gray-100:   #E9ECEF;
    --up-color-gray-200:   #F3F3F3;
    --up-color-gray-300:   #DEE2E6;
    --up-color-gray-500:   #7A7A7A;
    --up-color-gray-600:   #6C757D;
    --up-color-gray-700:   #424143;
    --up-color-gray-800:   #343A40;

    /* ===== 4. Semantische Rollen =====
     * Komponenten bitte NUR über diese Rollen stylen, nicht über die
     * Core-Palette direkt — so bleibt das System theme-stabil und
     * eine spätere Dark-Mode-Variante ist ein Einzeiler pro Rolle.
     */

    --up-color-bg:            var(--up-color-white);
    --up-color-bg-muted:      var(--up-color-gray-75);
    --up-color-bg-strong:     var(--up-color-cyan-500);
    --up-color-bg-inverse:    var(--up-color-blue-700);

    --up-color-fg:            var(--up-color-navy-900);
    --up-color-fg-muted:      var(--up-color-gray-600);
    --up-color-fg-on-strong:  var(--up-color-white);

    --up-color-accent:        var(--up-color-cyan-500);
    --up-color-primary:       var(--up-color-blue-700);
    --up-color-primary-hover: var(--up-color-blue-600);

    --up-color-border:        var(--up-color-gray-300);

    --up-color-success:       var(--up-color-green-500);
    --up-color-warning:       var(--up-color-amber-500);
    --up-color-danger:        var(--up-color-red-600);

    /* ===== 5. Typografie ===== */

    --up-font-display: "Barlow Condensed", "Impact", "Haettenschweiler", sans-serif;
    --up-font-body:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --up-font-ui:      "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Type-Skala — Werte sind die Zielgrößen auf Desktop.
     * Komponenten dürfen zusätzlich clamp()-Fluid-Scaling anwenden,
     * siehe design-system.md §3.2. */

    --up-text-display-xl: 100px;
    --up-text-display-l:  51px;
    --up-text-display-m:  36px;
    --up-text-h2:         28px;
    --up-text-h3:         22px;
    --up-text-button:     13px;
    --up-text-eyebrow:    11px;
    --up-text-fact-value: 22px;
    --up-text-fact-label: 12px;
    --up-text-body-l:     18px;
    --up-text-body:       16px;
    --up-text-body-s:     14px;
    --up-text-meta:       13px;
    --up-text-label:      12px;

    /* ===== 6. Spacing-Skala (4px-Basis) ===== */

    --up-space-1:   4px;
    --up-space-2:   8px;
    --up-space-3:  12px;
    --up-space-4:  16px;
    --up-space-5:  24px;
    --up-space-6:  32px;
    --up-space-7:  48px;
    --up-space-8:  64px;
    --up-space-9:  96px;
    --up-space-10: 128px;

    /* ===== 7. Container & Layout ===== */

    --up-container-max: 1200px;
    --up-gutter:        24px;
    --up-gutter-mobile: 16px;

    /* ===== 8. Shape ===== */

    --up-radius-0:    0;
    --up-radius-1:    4px;
    --up-radius-2:    6px;
    --up-radius-3:   10px;
    --up-radius-pill: 999px;

    /* ===== 9. Shadows ===== */

    --up-shadow-0: none;
    --up-shadow-1: 0 1px 4px rgba(0, 0, 0, .08);
    --up-shadow-2: 0 4px 16px rgba(0, 0, 0, .12);
    --up-shadow-3: 0 12px 40px rgba(0, 0, 0, .22);

    /* ===== 10. Motion ===== */

    --up-transition-fast:  .1s ease;
    --up-transition:       .2s ease;
    --up-transition-slow:  .35s ease;
}

/* Prefers-reduced-motion: Transitions neutralisieren.
 * Komponenten erben das automatisch, sobald sie --up-transition nutzen. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --up-transition-fast: 0s;
        --up-transition:      0s;
        --up-transition-slow: 0s;
    }
}