/* ============================================================
   iso-easy Design Tokens
   Source of Truth fuer Farben, Abstaende, Typografie, Radien
   ============================================================
   Nutzung:
   - :root          → Light-Mode-Defaults
   - [data-bs-theme="dark"] → Dark-Mode-Overrides

   Alle Komponenten im System sollten diese Tokens verwenden
   statt harter Farbwerte. Das garantiert Theme-Konsistenz.
   ============================================================ */

:root {
    /* ═══ BRAND / PRIMARY ═══════════════════════════════════ */
    --ie-brand:          #0f1f38;      /* Primaer-Blau, Navbar, Logo */
    --ie-brand-2:        #1a2e4a;      /* Lighter Navy, Gradient-Mix */
    --ie-brand-3:        #233c63;      /* noch lichter fuer Akzente */
    --ie-brand-contrast: #ffffff;      /* Text auf Brand-Hintergrund */

    /* ═══ ACCENT (Interaction / Links) ══════════════════════ */
    --ie-accent:         #6366f1;      /* Indigo — CTAs, Links */
    --ie-accent-hover:   #4f46e5;
    --ie-accent-soft:    #eef2ff;      /* soft background */
    --ie-accent-contrast:#ffffff;

    /* ═══ SEMANTIC ═════════════════════════════════════════ */
    --ie-success:        #198754;
    --ie-success-soft:   #d1fae5;
    --ie-warning:        #f59e0b;
    --ie-warning-soft:   #fef3c7;
    --ie-danger:         #dc3545;
    --ie-danger-soft:    #fee2e2;
    --ie-info:           #0dcaf0;
    --ie-info-soft:      #cffafe;

    /* ═══ SURFACES (Hintergruende) ═════════════════════════ */
    --ie-bg-base:        #f7f8fb;      /* Seiten-Hintergrund */
    --ie-bg-surface:     #ffffff;      /* Cards, Modals */
    --ie-bg-elevated:    #ffffff;      /* Popovers, Dropdowns */
    --ie-bg-subtle:      #f3f4f6;      /* Sekundaere Cards, hover */
    --ie-bg-nav:         #ffffff;      /* Top-Navbar Hintergrund */

    /* ═══ BORDERS ══════════════════════════════════════════ */
    --ie-border:         #e5e7eb;
    --ie-border-strong:  #d1d5db;
    --ie-border-subtle:  #f3f4f6;
    --ie-divider:        #eef0f4;

    /* ═══ TEXT ═════════════════════════════════════════════ */
    --ie-text:           #0f1f38;      /* primaer */
    --ie-text-secondary: #4b5563;      /* sekundaere Labels */
    --ie-text-muted:     #6b7280;      /* muted Hinweise */
    --ie-text-subtle:    #9ca3af;      /* sehr leise */
    --ie-text-inverse:   #ffffff;

    /* ═══ SHADOWS (3D-Layered) ═════════════════════════════ */
    /* Multi-Layer fuer weiche, tiefe Depth statt flach */
    --ie-shadow-xs:  0 1px 2px 0 rgba(15, 31, 56, .06);
    --ie-shadow-sm:
        0 1px 2px 0 rgba(15, 31, 56, .06),
        0 1px 3px 0 rgba(15, 31, 56, .08),
        inset 0 1px 0 0 rgba(255, 255, 255, .4);
    --ie-shadow-md:
        0 2px 4px -1px rgba(15, 31, 56, .06),
        0 4px 12px -2px rgba(15, 31, 56, .10),
        inset 0 1px 0 0 rgba(255, 255, 255, .5);
    --ie-shadow-lg:
        0 4px 8px -2px rgba(15, 31, 56, .08),
        0 12px 28px -4px rgba(15, 31, 56, .14),
        0 2px 4px -1px rgba(15, 31, 56, .06),
        inset 0 1px 0 0 rgba(255, 255, 255, .6);
    --ie-shadow-xl:
        0 8px 16px -4px rgba(15, 31, 56, .10),
        0 24px 48px -12px rgba(15, 31, 56, .20),
        0 4px 8px -2px rgba(15, 31, 56, .08),
        inset 0 1px 0 0 rgba(255, 255, 255, .7);
    --ie-shadow-lift:
        0 8px 20px -4px rgba(99, 102, 241, .18),
        0 16px 36px -8px rgba(15, 31, 56, .16),
        inset 0 1px 0 0 rgba(255, 255, 255, .6);

    /* ═══ RADIUS ═══════════════════════════════════════════ */
    --ie-radius-xs:   4px;
    --ie-radius-sm:   6px;
    --ie-radius-md:   8px;
    --ie-radius-lg:   12px;
    --ie-radius-xl:   16px;
    --ie-radius-2xl:  24px;
    --ie-radius-pill: 9999px;

    /* ═══ TYPOGRAPHY ═══════════════════════════════════════ */
    --ie-font-sans:   'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, system-ui, sans-serif;
    --ie-font-mono:   ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;

    --ie-fs-xs:       0.75rem;    /* 12px */
    --ie-fs-sm:       0.85rem;    /* 13.6px */
    --ie-fs-base:     0.9375rem;  /* 15px */
    --ie-fs-md:       1rem;       /* 16px */
    --ie-fs-lg:       1.125rem;   /* 18px */
    --ie-fs-xl:       1.25rem;    /* 20px */
    --ie-fs-2xl:      1.5rem;
    --ie-fs-3xl:      1.875rem;

    /* ═══ SPACING ══════════════════════════════════════════ */
    --ie-space-1:  0.25rem;
    --ie-space-2:  0.5rem;
    --ie-space-3:  0.75rem;
    --ie-space-4:  1rem;
    --ie-space-5:  1.25rem;
    --ie-space-6:  1.5rem;
    --ie-space-8:  2rem;
    --ie-space-10: 2.5rem;
    --ie-space-12: 3rem;

    /* ═══ TRANSITIONS ══════════════════════════════════════ */
    --ie-ease:      cubic-bezier(.4, 0, .2, 1);
    --ie-duration:  .15s;

    /* ═══ FOCUS RING ═══════════════════════════════════════ */
    --ie-focus-ring:     0 0 0 3px rgba(99, 102, 241, .35);
    --ie-focus-ring-err: 0 0 0 3px rgba(220, 53, 69, .35);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE
   Nicht nur invertierte Farben — eigenes Farbsystem mit warmem
   Navy-Grund (nicht pure black), damit es lange angenehm ist
   ══════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    /* Brand bleibt erkennbar, Akzent heller */
    --ie-brand:          #1e3a5f;      /* dunkel-navy bleibt, aber heller als light */
    --ie-brand-2:        #233c63;
    --ie-brand-3:        #2a4674;
    --ie-brand-contrast: #f1f5f9;

    --ie-accent:         #818cf8;      /* heller Indigo — kontrastiert mit Dark-Grund */
    --ie-accent-hover:   #a5b4fc;
    --ie-accent-soft:    rgba(129, 140, 248, .12);
    --ie-accent-contrast:#0f172a;

    /* Semantic — bleiben erkennbar */
    --ie-success:        #34d399;
    --ie-success-soft:   rgba(52, 211, 153, .12);
    --ie-warning:        #fbbf24;
    --ie-warning-soft:   rgba(251, 191, 36, .12);
    --ie-danger:         #f87171;
    --ie-danger-soft:    rgba(248, 113, 113, .12);
    --ie-info:           #38bdf8;
    --ie-info-soft:      rgba(56, 189, 248, .12);

    /* Surfaces — warmer Dark-Navy, nicht pure black */
    --ie-bg-base:        #0b1220;
    --ie-bg-surface:     #111a2e;
    --ie-bg-elevated:    #1a2542;
    --ie-bg-subtle:      #16203a;
    --ie-bg-nav:         #0d1526;

    /* Borders — subtil auf dunklem Grund */
    --ie-border:         #293551;
    --ie-border-strong:  #3a4768;
    --ie-border-subtle:  #1e2a44;
    --ie-divider:        #1e2a44;

    /* Text */
    --ie-text:           #e5edfa;
    --ie-text-secondary: #9aa7c2;
    --ie-text-muted:     #7b89a8;
    --ie-text-subtle:    #5e6b86;
    --ie-text-inverse:   #0f1f38;

    /* Shadows im Dark Mode — dunkel + subtiler Top-Highlight */
    --ie-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, .4);
    --ie-shadow-sm:
        0 2px 4px 0 rgba(0, 0, 0, .40),
        0 1px 2px 0 rgba(0, 0, 0, .25),
        inset 0 1px 0 0 rgba(255, 255, 255, .05);
    --ie-shadow-md:
        0 4px 10px -2px rgba(0, 0, 0, .45),
        0 2px 4px -1px rgba(0, 0, 0, .30),
        inset 0 1px 0 0 rgba(255, 255, 255, .06);
    --ie-shadow-lg:
        0 10px 25px -5px rgba(0, 0, 0, .55),
        0 4px 8px -2px rgba(0, 0, 0, .40),
        inset 0 1px 0 0 rgba(255, 255, 255, .07);
    --ie-shadow-xl:
        0 20px 40px -10px rgba(0, 0, 0, .65),
        0 8px 16px -4px rgba(0, 0, 0, .45),
        inset 0 1px 0 0 rgba(255, 255, 255, .08);
    --ie-shadow-lift:
        0 8px 20px -4px rgba(129, 140, 248, .25),
        0 16px 36px -8px rgba(0, 0, 0, .55),
        inset 0 1px 0 0 rgba(255, 255, 255, .08);

    /* Focus ring staerker im Dark Mode */
    --ie-focus-ring:     0 0 0 3px rgba(129, 140, 248, .45);
    --ie-focus-ring-err: 0 0 0 3px rgba(248, 113, 113, .45);
}

/* ══════════════════════════════════════════════════════════
   Bootstrap 5.3 Integration
   Bootstrap liest eigene --bs-* Variablen. Wir ueberschreiben
   diese mit unseren Tokens, damit BS-Komponenten automatisch
   mitspielen (btn, card, dropdown, modal etc.)
   ══════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {
    --bs-body-bg:            var(--ie-bg-base);
    --bs-body-color:         var(--ie-text);
    --bs-secondary-bg:       var(--ie-bg-subtle);
    --bs-tertiary-bg:        var(--ie-bg-subtle);
    --bs-border-color:       var(--ie-border);
    --bs-primary:            var(--ie-brand);
    --bs-primary-rgb:        15, 31, 56;
    --bs-link-color:         var(--ie-accent);
    --bs-link-hover-color:   var(--ie-accent-hover);
    --bs-emphasis-color:     var(--ie-text);
    --bs-heading-color:      var(--ie-text);
}

[data-bs-theme="dark"] {
    --bs-body-bg:            var(--ie-bg-base);
    --bs-body-color:         var(--ie-text);
    --bs-secondary-bg:       var(--ie-bg-subtle);
    --bs-tertiary-bg:        var(--ie-bg-subtle);
    --bs-border-color:       var(--ie-border);
    --bs-border-color-translucent: rgba(255,255,255,.08);
    --bs-primary:            var(--ie-accent);
    --bs-primary-rgb:        129, 140, 248;
    --bs-link-color:         var(--ie-accent);
    --bs-link-hover-color:   var(--ie-accent-hover);
    --bs-emphasis-color:     var(--ie-text);
    --bs-heading-color:      var(--ie-text);
}

/* ══════════════════════════════════════════════════════════
   Globale Basis-Styles (nutzen Tokens)
   ══════════════════════════════════════════════════════════ */
html {
    color-scheme: light;
    transition: background-color var(--ie-duration) var(--ie-ease);
}
html[data-bs-theme="dark"] {
    color-scheme: dark;
}

body {
    background-color: var(--ie-bg-base);
    color: var(--ie-text);
    font-family: var(--ie-font-sans);
    font-size: var(--ie-fs-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth Theme-Transitions — aber nicht bei Page Load */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color .25s var(--ie-ease),
                color .25s var(--ie-ease),
                border-color .25s var(--ie-ease),
                box-shadow .25s var(--ie-ease) !important;
}

/* Focus-Ring global */
*:focus-visible {
    outline: none;
    box-shadow: var(--ie-focus-ring);
}