/**
 * Synaptic Hub — Design Tokens v1.3.0
 * Einzige Wahrheitsquelle fuer alle Design-Variablen.
 * Basiert auf Google Workspace Design Language.
 *
 * WICHTIG: Diese Datei MUSS vor allen anderen CSS-Dateien geladen werden.
 * Die alten Variablen in global.css bleiben parallel bestehen bis zur
 * vollstaendigen Migration (Schritt 8).
 */

:root {
    /* ══════════════════════════════════════════
       FARBEN — Primaer (Google Blue)
       ══════════════════════════════════════════ */
    --color-primary: #1A73E8;
    --color-primary-hover: #1557B0;
    --color-primary-active: #174EA6;
    --color-primary-light: #D2E3FC;
    --color-primary-lighter: #E8F0FE;
    --color-primary-surface: #F0F6FF;

    /* ── Sekundaer-Akzent (Teal) ── */
    --color-accent: #00BFA5;
    --color-accent-hover: #00A98F;
    --color-accent-active: #00897B;
    --color-accent-light: #E0F2F1;
    --color-accent-lighter: #E0F7FA;

    /* ══════════════════════════════════════════
       FARBEN — Hintergruende
       ══════════════════════════════════════════ */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F8F9FA;
    --color-bg-tertiary: #F1F3F4;
    --color-bg-hover: #E8EAED;
    --color-bg-active: #D2E3FC;

    /* ── Dark Sections ── */
    --color-bg-dark: #1F1F1F;
    --color-bg-dark-border: #3C4043;
    --color-text-dark-secondary: #9AA0A6;

    /* ══════════════════════════════════════════
       FARBEN — Borders
       ══════════════════════════════════════════ */
    --color-border-light: #E0E0E0;
    --color-border-medium: #DADCE0;
    --color-border-strong: #BDC1C6;

    /* ══════════════════════════════════════════
       FARBEN — Text
       ══════════════════════════════════════════ */
    --color-text-primary: #202124;
    --color-text-secondary: #5F6368;
    --color-text-tertiary: #80868B;
    --color-text-inverse: #FFFFFF;
    --color-text-link: #1A73E8;
    --color-text-link-hover: #174EA6;

    /* ══════════════════════════════════════════
       FARBEN — Status & Feedback
       ══════════════════════════════════════════ */
    --color-success: #1E8E3E;
    --color-success-light: #E6F4EA;
    --color-warning: #F9AB00;
    --color-warning-light: #FEF7E0;
    --color-error: #D93025;
    --color-error-light: #FCE8E6;
    --color-info: #1A73E8;
    --color-info-light: #E8F0FE;

    /* ══════════════════════════════════════════
       FARBEN — Board-Labels / Kalender
       ══════════════════════════════════════════ */
    --color-label-red: #D50000;
    --color-label-pink: #E67C73;
    --color-label-orange: #F4511E;
    --color-label-yellow: #F6BF26;
    --color-label-green: #33B679;
    --color-label-green-dark: #0B8043;
    --color-label-blue: #039BE5;
    --color-label-indigo: #3F51B5;
    --color-label-purple: #7986CB;
    --color-label-grape: #8E24AA;
    --color-label-gray: #616161;

    /* ══════════════════════════════════════════
       TYPOGRAFIE
       ══════════════════════════════════════════ */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-body-sm: 13px;
    --text-body: 14px;
    --text-body-lg: 15px;
    --text-subtitle: 16px;
    --text-title: 18px;
    --text-heading: 22px;
    --text-display: 28px;
    --text-hero: 36px;

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

    /* ══════════════════════════════════════════
       SPACING (4px Basis-Grid)
       ══════════════════════════════════════════ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ══════════════════════════════════════════
       BORDER-RADIUS
       ══════════════════════════════════════════ */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ══════════════════════════════════════════
       SCHATTEN (Material 3 inspiriert)
       ══════════════════════════════════════════ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* ══════════════════════════════════════════
       TRANSITIONS
       ══════════════════════════════════════════ */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.15s ease;
    --transition-smooth: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ══════════════════════════════════════════
       LAYOUT
       ══════════════════════════════════════════ */
    --topbar-height: 56px;
    --sidebar-width: 256px;
    --sidebar-width-collapsed: 68px;
    --content-max-width: 1200px;

    /* ══════════════════════════════════════════
       Z-INDEX SKALA
       ══════════════════════════════════════════ */
    --z-base: 0;
    --z-sticky: 10;
    --z-topbar: 100;
    --z-sidebar: 200;
    --z-dropdown: 500;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-tooltip: 2100;
    --z-drag: 3000;
}

/* ══════════════════════════════════════════
   DARK THEME (vorbereitet, nicht aktiv)
   Aktivierung: document.documentElement.dataset.theme = 'dark'
   ══════════════════════════════════════════ */
[data-theme="dark"] {
    --color-bg-primary: #1F1F1F;
    --color-bg-secondary: #2D2D2D;
    --color-bg-tertiary: #3C3C3C;
    --color-bg-hover: #484848;
    --color-bg-active: #1A3A5C;

    --color-text-primary: #E8EAED;
    --color-text-secondary: #9AA0A6;
    --color-text-tertiary: #6B7280;
    --color-text-inverse: #1F1F1F;

    --color-border-light: #3C4043;
    --color-border-medium: #5F6368;
    --color-border-strong: #80868B;

    --color-primary: #8AB4F8;
    --color-primary-hover: #AECBFA;
    --color-primary-active: #669DF6;
    --color-primary-light: #1A3A5C;
    --color-primary-lighter: #1E3348;

    --color-accent: #64FFDA;
    --color-accent-hover: #4DD0B8;

    --color-error: #F28B82;
    --color-error-light: #3C2020;
    --color-success: #81C995;
    --color-success-light: #1E3A2C;
    --color-warning: #FDD663;
    --color-warning-light: #3C3520;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.3);
}