/* ═══════════════════════════════════════════════════════════
   HIVECRISP DESIGN TOKENS — Signal from Noise
   Single Source of Truth. Keine Hex-Codes in Komponenten!
   Light / Dark via :root[data-theme="light|dark"]
   ═══════════════════════════════════════════════════════════ */

/* ── LIGHT THEME ────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
    /* Surfaces */
    --bg:        #FAFAFA;
    --surface:   #FFFFFF;
    --surface-2: #F4F4F5;
    --surface-3: #EEEEF0;

    /* Text */
    --text:       #0A0C10;
    --text-soft:  #3F434A;
    --text-muted: #71757B;
    --text-faint: #9CA0A8;
    --teal-hover: #0F766E;

    /* Borders */
    --line:      #E5E7EB;
    --line-soft: #EFEFF1;

    /* Signal (Teal) — Haupt-Akzent */
    --teal:      #0D9488;
    --teal-hover:#0F766E;
    --teal-soft: rgba(13,148,136,0.10);
    --teal-glow: rgba(13,148,136,0.28);

    /* AI (Indigo) — nur für KI-Elemente */
    --indigo:     #6366F1;
    --indigo-soft:rgba(99,102,241,0.10);

    /* Semantische Status-Farben */
    --success: #22C55E;
    --warning: #F59E0B;
    --danger:  #EF4444;

    /* Shadows (cool-toned) */
    --shadow-xs: 0 1px 2px rgba(10,12,16,0.05);
    --shadow-sm: 0 2px 8px rgba(10,12,16,0.07);
    --shadow-md: 0 10px 20px -6px rgba(10,12,16,0.10), 0 2px 6px rgba(10,12,16,0.05);
    --shadow-lg: 0 24px 44px -14px rgba(10,12,16,0.16), 0 4px 10px rgba(10,12,16,0.06);
    --shadow-xl: 0 40px 70px -18px rgba(10,12,16,0.22), 0 8px 18px rgba(10,12,16,0.08);

    /* Glass */
    --glass-bg:     rgba(255,255,255,0.78);
    --glass-border: rgba(255,255,255,0.55);

    /* Hex-Grid SVG Farbe */
    --grid-color: rgba(10,12,16,0.04);
}

/* ── DARK THEME ─────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg:        #0A0C10;
    --surface:   #111418;
    --surface-2: #161A20;
    --surface-3: #1C2028;

    --text:       #F3F4F6;
    --text-soft:  #B4B8C0;
    --text-muted: #74798A;
    --text-faint: #5A5F6B;

    --line:      #1E232B;
    --line-soft: #15181E;

    --teal:      #2DD4BF;
    --teal-hover:#5EEAD4;
    --teal-soft: rgba(45,212,191,0.12);
    --teal-glow: rgba(45,212,191,0.30);

    --indigo:     #818CF8;
    --indigo-soft:rgba(129,140,248,0.12);

    --success: #4ADE80;
    --warning: #FBBF24;
    --danger:  #F87171;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 16px -4px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 40px -16px rgba(0,0,0,0.5);
    --shadow-xl: 0 30px 60px -24px rgba(0,0,0,0.6);

    --glass-bg:     rgba(13,17,23,0.80);
    --glass-border: rgba(255,255,255,0.07);

    --grid-color: rgba(255,255,255,0.035);
}

/* ═══ TYPOGRAFIE + STRUKTURELLE TOKENS ═══════════════════════ */

:root {
    --font-sans: 'Geist', -apple-system, system-ui, sans-serif;
    --font-mono: 'Geist Mono', 'Consolas', monospace;

    /* Sizes */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* Weights */
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Leading */
    --leading-none:    1;
    --leading-tight:   1.1;
    --leading-snug:    1.375;
    --leading-normal:  1.55;
    --leading-relaxed: 1.625;

    /* Tracking */
    --tracking-tight: -0.03em;
    --tracking-tighter: -0.045em;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radius */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 999px;

    /* Transitions / Easing */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.3s;
    --dur-slow: 0.5s;

    /* Layout */
    --max-w-content: 1320px;
    --max-w-chat:    768px;
    --header-height: 64px;

    /* Z-Index */
    --z-below:    -1;
    --z-base:     0;
    --z-above:    10;
    --z-sticky:   50;
    --z-header:   100;
    --z-dropdown: 200;
    --z-modal:    300;
    --z-toast:    400;

    /* Focus Ring */
    --ring-width:  3px;
    --ring-offset: 2px;
}