/* ==========================================================================
   theme.css — Packtisch v2 Design System
   Inspiration: Linear, Notion, Stripe Dashboard — sophisticated minimalism.
   Sparsamer Einsatz von Farbe, klare Hierarchie, viel Whitespace.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
         url('/assets/fonts/Inter-Variable.woff2') format('woff2');
}

:root,
[data-bs-theme="light"] {
    /* Akzent — sparsam eingesetzt, nur fuer aktive Elemente und Links */
    --pt-accent:        #5b67e3;
    --pt-accent-hover:  #4d58d4;
    --pt-accent-soft:   #eef0fc;
    --pt-accent-strong: #4338ca;

    /* Status — gedaempft, nicht poppig */
    --pt-success:       #16a34a;
    --pt-success-soft:  #f0fdf4;
    --pt-warning:       #d97706;
    --pt-warning-soft:  #fffbeb;
    --pt-danger:        #dc2626;
    --pt-danger-soft:   #fef2f2;
    --pt-info:          #0891b2;
    --pt-info-soft:     #f0fdff;

    /* Flaechen — warmes Off-White, sehr subtile Differenzierung */
    --pt-bg:            #fafaf9;
    --pt-surface:       #ffffff;
    --pt-surface-elev:  #ffffff;
    --pt-surface-soft:  #f5f5f4;
    --pt-surface-hover: #f0efed;
    --pt-border:        #e7e5e4;
    --pt-border-strong: #d6d3d1;
    --pt-divider:       #f0efed;

    /* Text — klare Hierarchie */
    --pt-text:          #1c1917;
    --pt-text-muted:    #57534e;
    --pt-text-soft:     #a8a29e;
    --pt-text-on-accent:#ffffff;

    /* Sidebar — dezent dunkel, kein Gradient */
    --pt-sidebar-bg:    #1c1917;
    --pt-sidebar-text:  #d6d3d1;
    --pt-sidebar-active-bg: rgba(91,103,227,.18);
    --pt-sidebar-active-text:#ffffff;
    --pt-topbar-bg:     rgba(255,255,255,.85);
    --pt-topbar-border: #ececec;

    /* Schatten — sehr dezent, iOS-like */
    --pt-shadow-xs: 0 1px 2px rgba(0,0,0,.03);
    --pt-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
    --pt-shadow:    0 4px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03);
    --pt-shadow-lg: 0 16px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
    --pt-shadow-glow: 0 0 0 3px rgba(91,103,227,.15);

    /* Radien — gemaessigt, nicht "cute" */
    --pt-radius-xs: 4px;
    --pt-radius-sm: 6px;
    --pt-radius:    10px;
    --pt-radius-lg: 14px;
    --pt-radius-xl: 20px;
    --pt-radius-pill: 999px;

    /* Transitions — schneller, subtiler */
    --pt-ease:       cubic-bezier(.4,0,.2,1);
    --pt-ease-out:   cubic-bezier(0,0,.2,1);
    --pt-transition: 150ms var(--pt-ease);
}

[data-bs-theme="dark"] {
    --pt-accent:        #818cf8;
    --pt-accent-hover:  #a5b4fc;
    --pt-accent-soft:   #1e1b4b;
    --pt-accent-strong: #6366f1;

    --pt-success:       #4ade80;
    --pt-success-soft:  #052e1a;
    --pt-warning:       #fbbf24;
    --pt-warning-soft:  #2a1d05;
    --pt-danger:        #f87171;
    --pt-danger-soft:   #2d0a0a;
    --pt-info:          #22d3ee;
    --pt-info-soft:     #06262e;

    --pt-bg:            #0a0a0a;
    --pt-surface:       #161615;
    --pt-surface-elev:  #1c1c1b;
    --pt-surface-soft:  #1f1f1e;
    --pt-surface-hover: #25252423;
    --pt-border:        #292827;
    --pt-border-strong: #3a3938;
    --pt-divider:       #232221;

    --pt-text:          #fafaf9;
    --pt-text-muted:    #a8a29e;
    --pt-text-soft:     #6b6764;
    --pt-text-on-accent:#0a0a0a;

    --pt-sidebar-bg:    #0a0a0a;
    --pt-sidebar-text:  #a8a29e;
    --pt-sidebar-active-bg: rgba(129,140,248,.18);
    --pt-sidebar-active-text:#ffffff;
    --pt-topbar-bg:     rgba(22,22,21,.85);
    --pt-topbar-border: #232221;

    --pt-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --pt-shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
    --pt-shadow:    0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
    --pt-shadow-lg: 0 16px 40px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
    --pt-shadow-glow: 0 0 0 3px rgba(129,140,248,.20);

    color-scheme: dark;
}

/* Bootstrap-Variablen ueberschreiben */
:root {
    --bs-body-bg:           var(--pt-bg);
    --bs-body-color:        var(--pt-text);
    --bs-secondary-color:   var(--pt-text-muted);
    --bs-tertiary-color:    var(--pt-text-soft);
    --bs-border-color:      var(--pt-border);
    --bs-border-radius:     var(--pt-radius);
    --bs-border-radius-sm:  var(--pt-radius-sm);
    --bs-border-radius-lg:  var(--pt-radius-lg);
    --bs-border-radius-xl:  var(--pt-radius-xl);
    --bs-link-color:        var(--pt-accent);
    --bs-link-hover-color:  var(--pt-accent-hover);
    --bs-primary:           var(--pt-accent);
    --bs-primary-rgb:       91,103,227;
    --bs-success:           var(--pt-success);
    --bs-warning:           var(--pt-warning);
    --bs-danger:            var(--pt-danger);
    --bs-info:              var(--pt-info);
    --bs-font-sans-serif:   'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Primary-Button — flache Farbe, kein Gradient */
.btn-primary {
    background-color: var(--pt-accent) !important;
    border-color: var(--pt-accent) !important;
    color: #fff !important;
    box-shadow: var(--pt-shadow-xs);
}
.btn-primary:hover {
    background-color: var(--pt-accent-hover) !important;
    border-color: var(--pt-accent-hover) !important;
    color: #fff !important;
}
.btn-primary:active { transform: scale(.98); }
.btn-primary:focus, .btn-primary:focus-visible {
    box-shadow: var(--pt-shadow-glow) !important;
    outline: 0;
}