/* =========================================================================
   OC Manager – Design Tokens
   Pfad in Flask-App:  app/static/css/tokens.css
   Lade-Reihenfolge:   tokens.css  →  base.css  →  components.css
   ========================================================================= */

:root {
    /* ---------- Brand ---------- */
    --color-brand-purple:        #411263;
    --color-brand-purple-hover:  #2D0D45;
    --color-brand-purple-soft:   #F4F0F8;
    --color-brand-cyan:          #40C4D9;
    --color-brand-cyan-hover:    #2FA9BC;
    --color-brand-cyan-soft:     #E8F8FA;

    /* ---------- Neutrals (cool gray) ---------- */
    --color-bg:                  #F7F8FA;   /* page bg */
    --color-surface:             #FFFFFF;   /* cards, tables, modals */
    --color-surface-muted:       #FAFBFC;   /* table head, hovered rows */
    --color-border:              #E6E8EC;
    --color-border-strong:       #D5D8DE;
    --color-divider:             #EEF0F3;

    --color-text:                #1A1D24;
    --color-text-muted:          #5B6374;
    --color-text-subtle:         #8A92A3;
    --color-text-inverse:        #FFFFFF;

    /* ---------- Semantic ---------- */
    --color-success:             #10915A;
    --color-success-soft:        #E6F4EC;
    --color-warning:             #B7791F;
    --color-warning-soft:        #FBF3E1;
    --color-danger:              #C2362B;
    --color-danger-soft:         #FBEAE8;
    --color-info:                #2563EB;
    --color-info-soft:           #E8EFFE;

    /* ---------- Typography ---------- */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:    12px;
    --text-sm:    13px;
    --text-base:  14px;
    --text-md:    15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   26px;
    --text-3xl:   32px;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

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

    /* ---------- Spacing (4 px scale) ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  56px;
    --space-10: 72px;

    /* ---------- Radius ---------- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-pill: 999px;

    /* ---------- Shadow (very subtle) ---------- */
    --shadow-xs: 0 1px 2px rgba(15, 22, 36, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 22, 36, 0.06), 0 1px 2px rgba(15, 22, 36, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 22, 36, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 22, 36, 0.12);
    --shadow-modal: 0 24px 48px rgba(15, 22, 36, 0.18);

    /* ---------- Layout ---------- */
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --content-max:   1600px;
    --container-pad: 32px;

    /* ---------- Motion ---------- */
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --duration-1: 100ms;
    --duration-2: 160ms;
    --duration-3: 240ms;

    /* ---------- Z-Index ---------- */
    --z-sidebar:  100;
    --z-topbar:   200;
    --z-dropdown: 800;
    --z-modal:    1000;
    --z-toast:    1100;

    /* ---------- Legacy aliases (Phase-6-Cleanup, NICHT in neuen Templates verwenden) ---------- */
    --bw-primary:      var(--color-brand-purple);
    --bw-primary-dark: var(--color-brand-purple-hover);
    --bw-accent:       #B891F1;
    --bw-cyan:         var(--color-brand-cyan);
    --bw-white:        var(--color-surface);
    --bw-gray-50:      #F8F9FA;
    --bw-gray-100:     #F1F3F5;
    --bw-gray-200:     #E9ECEF;
    --bw-gray-300:     #DEE2E6;
    --bw-gray-400:     #CED4DA;
    --bw-gray-500:     #ADB5BD;
    --bw-gray-600:     var(--color-text-muted);
    --bw-gray-700:     #495057;
    --bw-gray-800:     #343A40;
}