/*
 * DESIGN TOKENS - Chappy AI V2
 * Glasmorphism Design System (inspiriert von V1)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* === Dark Background === */
    --bg-dark: #05050a;
    --bg-card: rgba(12, 12, 20, 0.8);
    --glass-bg: rgba(18, 18, 35, 0.6);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);

    /* === Accent Farben === */
    --accent-1: #8b5cf6;       /* Purple - Primary */
    --accent-1-hover: #7c3aed;
    --accent-1-light: rgba(139, 92, 246, 0.15);
    --accent-2: #06b6d4;       /* Cyan - Secondary */
    --accent-3: #ec4899;       /* Pink - Highlight */

    /* === Glows === */
    --glow-purple: rgba(139, 92, 246, 0.5);
    --glow-cyan: rgba(6, 182, 212, 0.4);
    --glow-pink: rgba(236, 72, 153, 0.3);

    /* === Status Farben === */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #f43f5e;
    --color-info: #3b82f6;

    /* === Text === */
    --text-1: #ffffff;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;

    /* === Legacy Mapping (fuer bestehenden Code) === */
    --color-primary: #8b5cf6;
    --color-primary-hover: #7c3aed;
    --color-primary-light: rgba(139, 92, 246, 0.15);
    --color-bg: #05050a;
    --color-bg-secondary: rgba(12, 12, 20, 0.8);
    --color-bg-tertiary: rgba(18, 18, 35, 0.4);
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-hover: rgba(255, 255, 255, 0.12);
    --color-text: #ffffff;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;

    /* === Editor-spezifisch === */
    --color-highlight: #3b82f6;
    --color-selected: #22c55e;
    --color-drag: #f59e0b;
    --color-margin: #f97316;
    --color-padding: #22c55e;

    /* === Spacing === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* === Typography === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height: 1.5;

    /* === Borders === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
    --shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.05) inset;

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Layout === */
    --header-height: 52px;
    --panel-width-sm: 240px;
    --panel-width-md: 280px;
    --panel-width-lg: 320px;
    --toolbar-height: 36px;
}