/* ============================================================================
   BusinessHub Design-Tokens (UI-Refresh 2026-09)
   Quelle der Primitive: MaYE-Media-CI (mayemedia_radar/src/app/globals.css)
   - Navy  #1B2C40  primär (Buttons, Sidebar, Überschriften-Akzent)
   - Cyan  #00B4B6  nur als Fläche/Linie/Fokusring (2,56:1 auf Weiß → nie Text)
   - Cyan-Text #0A6F70 für Links/Text-Akzente (5,1:1 auf Bg)
   Semantische Tokens werden unten für Light und Dark getrennt gesetzt;
   Komponenten dürfen NUR semantische Tokens verwenden, keine Primitive.
   ============================================================================ */

:root {
    /* ---- Primitive: Marke ---- */
    --brand-navy:        #1b2c40;
    --brand-navy-deep:   #142131;
    --brand-navy-soft:   #24384f;
    --brand-cyan:        #00b4b6;
    --brand-cyan-dark:   #0a6f70;
    --brand-cyan-soft:   #e8f7f7;
    --brand-cyan-glow:   rgba(0, 180, 182, 0.28);
    --brand-ink:         #0f1b29;
    --brand-muted:       #4a5a6b;
    --brand-line:        #e2e8ee;
    --brand-bg:          #f5f8fa;

    /* ---- Primitive: Ampel ---- */
    --ampel-gruen:       #15803d;  --ampel-gruen-bg:  #dcfce7;
    --ampel-gelb:        #a16207;  --ampel-gelb-bg:   #fef9c3;
    --ampel-rot:         #b91c1c;  --ampel-rot-bg:    #fee2e2;
    --ampel-blau:        #1d4ed8;  --ampel-blau-bg:   #dbeafe;

    /* ---- Typografie ---- */
    --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-2xs: 0.6875rem;  /* 11px  nur für Badges/Labels in Großbuchstaben */
    --fs-xs:  0.75rem;    /* 12px  Meta, Tabellenkopf */
    --fs-sm:  0.8125rem;  /* 13px  Nebentext */
    --fs-base: 0.875rem;  /* 14px  Fließtext Desktop */
    --fs-md:  0.9375rem;  /* 15px  Fließtext Mobile, Formulare */
    --fs-lg:  1.0625rem;  /* 17px  Karten-Titel */
    --fs-xl:  1.25rem;    /* 20px  Seitentitel Mobile */
    --fs-2xl: 1.5rem;     /* 24px  Seitentitel Desktop */
    --fs-3xl: 1.875rem;   /* 30px  Kennzahlen */
    --lh-tight: 1.25;
    --lh-base: 1.5;

    /* ---- Abstände (8er-Raster, dicht für Dashboard) ---- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;

    /* ---- Radien ---- */
    --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

    /* ---- Schatten ---- */
    --shadow-xs: 0 1px 2px rgba(15, 27, 41, 0.06);
    --shadow-sm: 0 1px 3px rgba(15, 27, 41, 0.08), 0 1px 2px rgba(15, 27, 41, 0.05);
    --shadow-md: 0 6px 16px -4px rgba(15, 27, 41, 0.12), 0 2px 6px -2px rgba(15, 27, 41, 0.06);
    --shadow-lg: 0 20px 40px -12px rgba(15, 27, 41, 0.25);

    /* ---- Z-Index-Skala ---- */
    --z-sticky: 20;  --z-topbar: 100;  --z-bottomnav: 110;  --z-drawer-backdrop: 150;
    --z-drawer: 160;  --z-menu: 300;  --z-modal: 1000;  --z-toast: 1100;

    /* ---- Layout ---- */
    --sidebar-w: 248px;
    --topbar-h: 56px;
    --bottomnav-h: 60px;
    --content-max: 1440px;
    --touch: 44px;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;  --dur: 180ms;  --dur-slow: 260ms;

    /* ========================================================================
       Semantische Tokens — LIGHT
       ======================================================================== */
    color-scheme: light;
    --color-bg:            var(--brand-bg);
    --color-surface:       #ffffff;
    --color-surface-2:     #eef2f5;     /* Tabellenkopf, Hover, Chips */
    --color-surface-3:     #e3e9ee;     /* gedrückte Flächen */
    --color-text:          var(--brand-ink);
    --color-text-muted:    var(--brand-muted);
    --color-text-faint:    #5f6e7d;     /* Meta-Text: 5,2:1 auf Weiß, 4,65:1 auf surface-2 */
    --color-border:        var(--brand-line);
    --color-border-strong: #c9d3dc;
    --color-input-bg:      #ffffff;
    --color-input-border:  #cfd8e0;

    --color-primary:       var(--brand-navy);
    --color-primary-hover: var(--brand-navy-deep);
    --color-primary-fg:    #ffffff;
    --color-primary-soft:  #e9edf2;

    --color-accent:        var(--brand-cyan);
    --color-accent-fg:     var(--brand-navy);
    --color-accent-soft:   var(--brand-cyan-soft);
    --color-accent-text:   var(--brand-cyan-dark);
    --color-link:          var(--brand-cyan-dark);
    --color-ring:          var(--brand-cyan);

    --color-success:       var(--ampel-gruen);   --color-success-bg: var(--ampel-gruen-bg);
    --color-warning:       var(--ampel-gelb);    --color-warning-bg: var(--ampel-gelb-bg);
    --color-danger:        var(--ampel-rot);     --color-danger-bg:  var(--ampel-rot-bg);
    --color-info:          var(--ampel-blau);    --color-info-bg:    var(--ampel-blau-bg);
    --color-danger-solid:  #dc2626;              --color-danger-solid-hover: #b91c1c;
    --color-success-solid: #16a34a;

    --color-sidebar-bg:     var(--brand-navy);
    --color-sidebar-fg:     #ffffff;
    --color-sidebar-muted:  #9fb0c2;
    --color-sidebar-hover:  rgba(255, 255, 255, 0.06);
    --color-sidebar-active: var(--brand-navy-soft);
    --color-sidebar-border: #2c4258;

    --color-backdrop:      rgba(15, 27, 41, 0.55);

    /* ========================================================================
       Legacy-Aliase — halten die noch nicht migrierten Modul-Stylesheets
       (kanban.css, questionnaire.css, …) am Leben. Werden in Phase 3 entfernt.
       ======================================================================== */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --primary-light: var(--brand-navy-soft);
    --secondary: var(--color-text-muted);
    --success: var(--color-success);
    --danger: var(--color-danger);
    --warning: var(--color-warning);
    --info: var(--color-info);
    --dark: var(--brand-navy);
    --light: var(--color-surface-2);
    --white: var(--color-surface);
    --gray-100: var(--color-bg);
    --gray-200: var(--color-border);
    --gray-300: var(--color-border-strong);
    --gray-400: var(--color-text-faint);
    --gray-500: var(--color-text-muted);
    --gray-600: var(--color-text-muted);
    --gray-700: var(--color-text);
    --gray-800: var(--color-text);
    --radius: var(--r);
    --shadow: var(--shadow-sm);
    --bg-primary: var(--color-bg);
    --bg-secondary: var(--color-surface);
    --border-color: var(--color-border);
    --text-primary: var(--color-text);
    --text-muted: var(--color-text-muted);
}

/* ============================================================================
   Semantische Tokens — DARK
   Aktiv über <html data-theme="dark"> (gesetzt in layout.php, gespeichert in
   localStorage) ODER Systemeinstellung, solange kein explizites Theme gewählt ist.
   ============================================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg:            #0d1621;
    --color-surface:       #152130;
    --color-surface-2:     #1d2b3c;
    --color-surface-3:     #263749;
    --color-text:          #e6edf3;
    --color-text-muted:    #a7b6c5;
    --color-text-faint:    #93a3b3;     /* 6,3:1 auf surface, 4,7:1 auf surface-3 */
    --color-border:        #263749;
    --color-border-strong: #33475c;
    --color-input-bg:      #0f1a27;
    --color-input-border:  #33475c;

    --color-primary:       var(--brand-cyan);   /* Navy auf Navy wäre unsichtbar */
    --color-primary-hover: #19c8ca;
    --color-primary-fg:    var(--brand-ink);
    --color-primary-soft:  rgba(0, 180, 182, 0.14);

    --color-accent-soft:   rgba(0, 180, 182, 0.14);
    --color-accent-text:   #5fd6d7;
    --color-link:          #5fd6d7;

    --color-success:       #4ade80;  --color-success-bg: rgba(34, 197, 94, 0.14);
    --color-warning:       #fbbf24;  --color-warning-bg: rgba(245, 158, 11, 0.14);
    --color-danger:        #f87171;  --color-danger-bg:  rgba(239, 68, 68, 0.14);
    --color-info:          #7eb0ff;  --color-info-bg:    rgba(59, 130, 246, 0.14);
    --color-danger-solid:  #dc2626;  --color-danger-solid-hover: #ef4444;
    --color-success-solid: #16a34a;

    --color-sidebar-bg:     #0b131d;
    --color-sidebar-border: #1d2b3c;
    --color-sidebar-active: #1d2b3c;

    --color-backdrop:      rgba(0, 0, 0, 0.65);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.8);
}