/**
 * Intellarys Design System - Variables
 * Central design tokens for consistent styling
 */

:root {
    /* Primary Colors */
    --primary: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;
    --primary-glow: rgba(59, 130, 246, 0.12);

    /* Accent Colors */
    --accent-success: #10b981;
    --accent-success-glow: rgba(16, 185, 129, 0.08);
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-danger-glow: rgba(239, 68, 68, 0.08);
    --accent-purple: #a855f7;

    /* Dark Theme */
    --dark: #020617;
    --dark-700: #0f172a;
    --dark-600: #1e293b;

    /* Text Colors */
    --text: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-dim: #475569;

    /* Borders */
    --border: rgba(148, 163, 184, 0.1);
    --border-light: rgba(148, 163, 184, 0.2);

    /* Spacing Scale (8pt grid) */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Easing Functions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --font-sans: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 500;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-tooltip: 1100;
}

/* CSS Property for animated border (with fallback) */
@supports (background: conic-gradient(red, blue)) {
    @property --gradient-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
}