/* ============================================================
   QUICK COUNCIL - DESIGN SYSTEM VARIABLES
   ============================================================ */

:root {
    /* ==================== COLORS ==================== */

    /* Primary Brand */
    --color-primary: #00d4ff;
    --color-primary-hover: #00b8e6;
    --color-primary-glow: rgba(0, 212, 255, 0.4);

    /* Secondary Brand */
    --color-secondary: #7b2ff7;
    --color-secondary-hover: #6a28d9;
    --color-secondary-glow: rgba(123, 47, 247, 0.4);

    /* Semantic Colors */
    --color-success: #00c864;
    --color-success-bg: rgba(0, 200, 100, 0.15);
    --color-warning: #ffb400;
    --color-warning-bg: rgba(255, 180, 0, 0.15);
    --color-error: #ff6464;
    --color-error-bg: rgba(255, 100, 100, 0.15);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.15);

    /* AI Provider Brand Colors */
    --ai-openai: #10a37f;
    --ai-openai-glow: rgba(16, 163, 127, 0.4);
    --ai-openai-bg: rgba(16, 163, 127, 0.15);

    --ai-anthropic: #d4a574;
    --ai-anthropic-glow: rgba(212, 165, 116, 0.4);
    --ai-anthropic-bg: rgba(212, 165, 116, 0.15);

    --ai-google: #4285f4;
    --ai-google-glow: rgba(66, 133, 244, 0.4);
    --ai-google-bg: rgba(66, 133, 244, 0.15);

    --ai-meta: #0668e1;
    --ai-meta-glow: rgba(6, 104, 225, 0.4);
    --ai-meta-bg: rgba(6, 104, 225, 0.15);

    --ai-mistral: #ff7000;
    --ai-mistral-glow: rgba(255, 112, 0, 0.4);
    --ai-mistral-bg: rgba(255, 112, 0, 0.15);

    /* Tier Colors */
    --tier-fast: #22c55e;
    --tier-fast-bg: rgba(34, 197, 94, 0.15);
    --tier-standard: #3b82f6;
    --tier-standard-bg: rgba(59, 130, 246, 0.15);
    --tier-critical: #ef4444;
    --tier-critical-bg: rgba(239, 68, 68, 0.15);

    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: rgba(30, 41, 59, 0.8);
    --bg-card-hover: rgba(30, 41, 59, 0.95);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-input: rgba(0, 0, 0, 0.3);

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-disabled: #475569;

    /* Border Colors */
    --border-default: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --border-focus: var(--color-primary);

    /* ==================== TYPOGRAPHY ==================== */

    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
    --font-family-serif: 'Crimson Pro', Georgia, serif;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.85rem;   /* ~14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.1rem;    /* ~18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 2rem;     /* 32px */
    --font-size-4xl: 2.5rem;   /* 40px */

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ==================== SPACING ==================== */

    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;

    /* ==================== BORDERS ==================== */

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

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    /* ==================== SHADOWS ==================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--color-primary-glow);

    /* ==================== TRANSITIONS ==================== */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ==================== Z-INDEX ==================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-confetti: 1000;

    /* ==================== BREAKPOINTS (for reference) ==================== */
    /* --breakpoint-sm: 640px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 1024px; */
    /* --breakpoint-xl: 1280px; */

    /* ==================== TOUCH TARGETS ==================== */

    --touch-target-min: 44px;
}

/* ============================================================
   DARK THEME (default)
   ============================================================ */
[data-theme="dark"] {
    /* Already using dark theme variables */
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --transition-bounce: 0s;
    }
}