/* SYNC-GRUPPE portal-assets · Kanonische Quelle: partner-portal/assets/css/tokens.css
 * Aenderungen NUR in der Quelle vornehmen, dann: php tools/sync-portal-assets.php --apply
 * Kopien in den anderen Portalen werden dabei byte-genau ueberschrieben. */
/* =====================================================================
 * NOA Partner-Portal — Design Tokens  ·  "Partner Cockpit"
 * ---------------------------------------------------------------------
 * Markenbild = NOA: Türkis-Primary (#00aeb8 → #006670), Navy-Grounding
 * (#0a2540) und ein warmer Amber-Reward-Akzent (#f5a33b, das Herz aus
 * dem NOA-Logo) für die Gamification-Ebene (Level, Fortschritt, Erfolge).
 *
 * WICHTIG: Token-NAMEN sind unverändert (die Komponenten referenzieren
 * sie). Geändert wurden nur Werte; neue Tokens sind additiv ergänzt.
 * ===================================================================== */

: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 (Fills, aktive Borders) */
    --color-primary-600: #008189;   /* Button-BG (Weiß darauf ≈ 4.6:1)      */
    --color-primary-700: #00646a;   /* Links / Hover (≈ 4.9:1 auf Weiß)     */
    --color-primary-800: #014e54;
    --color-primary-900: #0a2540;   /* NOA-Navy — tiefste Erdung            */

    /* -- Reward-Akzent (NOA-Amber / Logo-Herz) — Gamification ------- */
    --color-accent-50:  #fff8ed;
    --color-accent-100: #fdecd0;
    --color-accent-200: #fbd9a5;
    --color-accent-500: #f5a33b;   /* Brand-Amber (Tier, XP, Erfolge)      */
    --color-accent-600: #e08522;
    --color-accent-700: #b9651a;   /* Text auf hellem Amber (≈ 4.7:1)      */

    /* -- 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 (Gamification / Hero / CTA) ---------------- */
    --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);     /* starkes ease-out  */
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement */
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* dezenter Overshoot */
    --dur-fast:     130ms;
    --dur-base:     190ms;
    --dur-slow:     280ms;

    /* -- Layout-Maße ---------------------------------------------- */
    --topbar-h:    60px;
    --catbar-h:    50px;
    --subbar-h:    42px;
    --header-h:    calc(var(--topbar-h) + var(--catbar-h) + var(--subbar-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-partner-theme']). Nur Token-Werte
 * werden umgeschrieben; Komponenten referenzieren die Tokens und ziehen mit.
 * Identisches Mapping wie Admin-/Security-Portal (gemeinsames Markensystem).
 * ===================================================================== */
[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 neutral-200 statt -50 (reines Fast-Weiß blendet auf tiefem Navy). */
    --text-primary:   var(--color-neutral-200);
    --text-secondary: var(--color-neutral-300);
    --text-muted:     var(--color-neutral-400);
    --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 (Badge-/Alert-Flächen) DUNKEL, Text (-700) HELL.
       So bleiben Status-Badges lesbar (heller Text auf dunklem Tint) und BARER
       Statustext (color:-700 auf Karte) fällt nicht mehr durch (~2.7:1 → ~7:1).
       -500 bleibt konstant (Solid-Buttons); nur -700-als-BG (Button-Hover) wird
       unten separat 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;
}
/* -700 wird vereinzelt als Button-Hover-Hintergrund genutzt → im Dark auf -500
   pinnen, sonst würde der Button hell (heller -700-Wert). */
[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) — gilt fürs ganze Portal. */
@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, analog Admin): einige Partner-Views
   nutzen nicht-definierte Tokens (--brand/--success/--success-soft) → auf echte
   theme-fähige Tokens aliasen. */
:root {
    --brand:        var(--color-primary-500);
    --success:      var(--color-success-500);
    --success-soft: var(--color-success-100);
}