/* =====================================================================
 * NOA Admin – Design Tokens  ·  "Cockpit" (NOA-Markenbild)
 * ---------------------------------------------------------------------
 * Identisches Markensystem wie das Partner-Portal: Türkis-Primary
 * (#00aeb8 → #006670), Navy-Grounding (#0a2540) und ein warmer
 * Amber-Akzent (#f5a33b, das Herz aus dem NOA-Logo).
 *
 * WICHTIG: Token-NAMEN unverändert (Komponenten referenzieren sie),
 * nur Werte geändert + additive Ergänzungen.
 * ===================================================================== */

:root {
    /* -- Brand (Primary = NOA-Türkis) ------------------------------- */
    --color-primary-50:  #ecfeff;
    --color-primary-100: #cffafe;
    --color-primary-200: #a6f1f5;
    --color-primary-300: #5fdfe7;
    --color-primary-400: #1ec6d0;
    --color-primary-500: #00aeb8;   /* Brand-Türkis */
    --color-primary-600: #008189;   /* Button-BG (Weiß ≈ 4.6:1) */
    --color-primary-700: #00646a;   /* Links / Hover */
    --color-primary-800: #014e54;
    --color-primary-900: #0a2540;   /* NOA-Navy */

    /* -- Akzent (NOA-Amber / Logo-Herz) ---------------------------- */
    --color-accent-50:  #fff8ed;
    --color-accent-100: #fdecd0;
    --color-accent-200: #fbd9a5;
    --color-accent-500: #f5a33b;
    --color-accent-600: #e08522;
    --color-accent-700: #b9651a;

    /* -- NOA-Navy (Topbar, Hero, Verläufe) ------------------------- */
    --color-navy-500: #0d3a52;
    --color-navy-700: #0a2540;
    --color-navy-900: #061a2e;

    /* -- Neutral (Surface-Skala — leicht kühl/teal-getönt) --------- */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f6f9fb;
    --color-neutral-100: #eef3f6;
    --color-neutral-200: #e1e8ee;
    --color-neutral-300: #cbd6df;
    --color-neutral-400: #93a3b3;
    --color-neutral-500: #647281;
    --color-neutral-600: #475461;
    --color-neutral-700: #323d49;
    --color-neutral-800: #1d2733;
    --color-neutral-900: #0d1722;

    /* -- Semantic -------------------------------------------------- */
    --color-success-50:  #f0fdf4;
    --color-success-100: #d6f5e0;
    --color-success-500: #15a34a;
    --color-success-700: #117a39;

    --color-warning-50:  #fffaeb;
    --color-warning-100: #fdeec6;
    --color-warning-500: #e08522;
    --color-warning-700: #b45309;

    --color-danger-50:   #fef2f2;
    --color-danger-100:  #fde0e0;
    --color-danger-500:  #e0413e;
    --color-danger-700:  #b91c1c;

    --color-info-50:     #eefaff;
    --color-info-100:    #d4f0fc;
    --color-info-500:    #0a93c7;
    --color-info-700:    #0369a1;

    /* -- Surfaces -------------------------------------------------- */
    --bg-app:       var(--color-neutral-50);
    --bg-surface:   var(--color-neutral-0);
    --bg-elevated:  var(--color-neutral-0);
    --bg-muted:     var(--color-neutral-100);
    --bg-topbar:    var(--color-navy-700);   /* NOA-Navy */
    --bg-subbar:    var(--color-neutral-0);
    --bg-catbar:    var(--color-neutral-0);

    /* -- Text ------------------------------------------------------ */
    --text-primary:   var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-muted:     var(--color-neutral-500);
    --text-inverse:   var(--color-neutral-0);
    --text-link:      var(--color-primary-700);
    --text-link-hover:var(--color-primary-800);

    /* -- Borders --------------------------------------------------- */
    --border-subtle:  var(--color-neutral-200);
    --border-default: var(--color-neutral-300);
    --border-strong:  var(--color-neutral-400);

    /* -- Radii ----------------------------------------------------- */
    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius-md: 11px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-pill: 9999px;

    /* -- Shadows (weiche "Diffusion"-Schatten, leicht brand-getönt) */
    --shadow-xs: 0 1px 2px rgba(10,37,64,.05);
    --shadow-sm: 0 1px 3px rgba(10,37,64,.07), 0 1px 2px rgba(10,37,64,.04);
    --shadow-md: 0 8px 20px -10px rgba(10,37,64,.16), 0 2px 6px rgba(10,37,64,.05);
    --shadow-lg: 0 22px 48px -18px rgba(10,37,64,.26), 0 6px 14px rgba(10,37,64,.08);
    --shadow-brand: 0 12px 26px -12px rgba(0,129,137,.55);
    --shadow-reward: 0 12px 26px -12px rgba(224,133,34,.50);
    --shadow-focus: 0 0 0 3px rgba(0,174,184,.30);

    /* -- Brand-Verläufe (Hero / CTA / Akzente) --------------------- */
    --grad-brand:  linear-gradient(135deg, #00c2cd 0%, #00929b 55%, #00646a 100%);
    --grad-hero:   linear-gradient(135deg, #0a2540 0%, #0d3a52 42%, #00646a 100%);
    --grad-reward: linear-gradient(135deg, #ffc46b 0%, #f5a33b 48%, #e08522 100%);
    --grad-sheen:  linear-gradient(115deg, transparent 0%, rgba(255,255,255,.28) 48%, transparent 72%);

    /* -- Spacing (4px-Basis) -------------------------------------- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;

    /* -- Typografie ----------------------------------------------- */
    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --text-xs:    12px;  --leading-xs:    16px;
    --text-sm:    13px;  --leading-sm:    18px;
    --text-base:  14px;  --leading-base:  20px;
    --text-md:    16px;  --leading-md:    24px;
    --text-lg:    18px;  --leading-lg:    28px;
    --text-xl:    22px;  --leading-xl:    30px;
    --text-2xl:   28px;  --leading-2xl:   36px;
    --text-3xl:   36px;  --leading-3xl:   44px;
    --text-4xl:   46px;  --leading-4xl:   52px;

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

    /* -- Z-Index --------------------------------------------------- */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  500;
    --z-modal:    1000;
    --z-toast:    2000;

    /* -- Motion ---------------------------------------------------- */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:     130ms;
    --dur-base:     190ms;
    --dur-slow:     280ms;

    /* -- Layout-Maße ---------------------------------------------- */
    --topbar-h:    60px;
    --catbar-h:    50px;
    --sidebar-w:           240px;
    --sidebar-w-collapsed: 64px;
    --header-h:    calc(var(--topbar-h) + var(--catbar-h));
    --content-max: 1440px;
    --content-pad: var(--space-7);
}

/* Dark-Mode — aktiviert via <html data-theme="dark"> (Anti-FOUC-Skript im
   Layout, Präferenz in localStorage['noa-admin-theme']). Nur Token-Werte;
   Komponenten referenzieren die Tokens und ziehen mit. */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-app:       var(--color-navy-900);
    --bg-surface:   var(--color-neutral-800);
    --bg-elevated:  var(--color-neutral-700);
    --bg-muted:     var(--color-neutral-700);
    --bg-topbar:    var(--color-navy-900);
    --bg-subbar:    var(--color-neutral-800);
    --bg-catbar:    var(--color-neutral-800);

    /* Primär-Text bewusst neutral-200 statt -50: reines Fast-Weiß auf dem tiefen
       Navy blendet (~14:1). neutral-200 senkt auf ~12:1 (Karten ~11.8:1). */
    --text-primary:   var(--color-neutral-200);
    --text-secondary: var(--color-neutral-300);
    --text-muted:     #9aa9bd;   /* etwas heller als neutral-400: klärt AA auch auf --bg-muted (Pipeline-Spalten) */
    --text-link:      var(--color-primary-300);
    --text-link-hover:var(--color-primary-200);

    --border-subtle:  var(--color-neutral-700);
    --border-default: var(--color-neutral-600);
    --border-strong:  var(--color-neutral-500);

    /* Semantik im Dark: Tints DUNKEL, Text (-700) HELL. Status-Badges + barer
       Statustext bleiben lesbar. -500 konstant (Solid-Buttons); -700-als-BG
       (Button-Hover) unten auf -500 gepinnt. */
    --color-danger-50:  #3a1c1e;  --color-danger-100:  #4a2427;  --color-danger-700:  #f0a3a8;
    --color-warning-50: #362713;  --color-warning-100: #46331a;  --color-warning-700: #e8b566;
    --color-success-50: #14301f;  --color-success-100: #1c3d28;  --color-success-700: #6fd89a;
    --color-info-50:    #12303c;  --color-info-100:    #183a49;  --color-info-700:    #6fc7e8;
}
[data-theme="dark"] .btn--danger:hover  { background: var(--color-danger-500);  border-color: var(--color-danger-500); }
[data-theme="dark"] .btn--warning:hover { background: var(--color-warning-500); border-color: var(--color-warning-500); }
[data-theme="dark"] .btn--success:hover { background: var(--color-success-500); border-color: var(--color-success-500); }

/* Bewegung global respektieren (A11y). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
 * Legacy-Token-Aliase (Dark-Mode-Kontrast-Fix Admin-Views, 2026-07-14)
 * ---------------------------------------------------------------------
 * Viele Admin-Views nutzen in Inline-Styles Tokens, die im Token-System
 * NIE definiert waren (--border 130×, --bg-subtle, --color-primary 34×,
 * --warning, --danger …). Der helle Hex-Fallback (z. B. var(--border,#e5e7eb)
 * bzw. var(--bg-subtle,#f1f5f9)) griff dadurch IMMER — auch im Dark-Mode:
 * helle Ränder/Flächen, unlesbare Pipeline-Spalten (heller Grund + heller Text).
 * Hier auf die echten, theme-fähigen Tokens aliasen → Light unverändert
 * (Alias == bisheriger Fallwert bzw. praktisch identisch), Dark zieht mit.
 * ===================================================================== */
:root {
    --border:           var(--border-subtle);
    --color-border:     var(--border-subtle);
    --bg-subtle:        var(--bg-muted);
    --color-text-muted: var(--text-muted);
    --warning:          var(--color-warning-500);
    --color-warning:    var(--color-warning-500);
    --danger:           var(--color-danger-500);
    --color-danger:     var(--color-danger-500);
    --color-success:    var(--color-success-500);
    --color-info:       var(--color-info-500);
    --color-primary:    #2563eb;   /* == bisheriger Fallback → Light unveraendert */
    --accent:           #00a9b4;
    --smr-navy:         var(--color-navy-900);
}
[data-theme="dark"] {
    /* Blau-/Tuerkis-Akzente auf Dunkel aufhellen (Kontrast) */
    --color-primary: #5b8def;
    --accent:        #22c1cd;
}