:root {
    /* Background */
    --bg: #08080c;
    --canvas-bg: #0c0c18;
    --card-bg: rgba(20, 20, 28, 0.45);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(139, 92, 246, 0.3);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #a0a0ab;
    --text-muted: #d4d4d8;

    /* Accent (purple) */
    --accent: #8b5cf6;
    --accent-40: rgba(139, 92, 246, 0.40);
    --accent-30: rgba(139, 92, 246, 0.30);
    --accent-15: rgba(139, 92, 246, 0.15);
    --accent-12: rgba(139, 92, 246, 0.12);
    --accent-deep: #6d28d9;
    --accent-deep-12: rgba(109, 40, 217, 0.12);

    /* Semantic */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-tooltip-bg: #27272a;

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

    /* Border radius */
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Typography */
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Animation */
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.6s;
    --duration-ambient: 2.4s;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all var(--duration-base) var(--ease-smooth);
}