/**
 * QueryCraft - Premium SaaS Design System & Design Tokens
 * Color palette inspired by Linear, Supabase, Snowflake, and VS Code.
 */

:root {
    /* Color Palette */
    --qc-primary: #3b82f6;
    --qc-primary-hover: #2563eb;
    --qc-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --qc-primary-glow: 0 4px 16px rgba(59, 130, 246, 0.35);

    --qc-accent: #06b6d4;
    --qc-accent-hover: #22d3ee;
    --qc-accent-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --qc-accent-glow: 0 4px 16px rgba(6, 182, 212, 0.35);

    --qc-success: #10b981;
    --qc-success-bg: rgba(16, 185, 129, 0.15);
    --qc-warning: #f59e0b;
    --qc-warning-bg: rgba(245, 158, 11, 0.15);
    --qc-danger: #ef4444;
    --qc-danger-bg: rgba(239, 68, 68, 0.15);

    /* Typography */
    --qc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --qc-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    --qc-editor-font-size: 14px;

    /* Layout Dimensions & Radii */
    --qc-header-h: 58px;
    --qc-sidebar-w: 240px;
    --qc-sidebar-collapsed-w: 64px;

    --qc-radius-xs: 4px;
    --qc-radius-sm: 6px;
    --qc-radius-md: 10px;
    --qc-radius-lg: 14px;
    --qc-radius-xl: 20px;
    --qc-radius-full: 9999px;

    --qc-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --qc-transition-normal: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme (Default SaaS Dark) */
[data-theme="dark"], :root {
    --qc-bg-app: #070a13;
    --qc-bg-surface: #0d1222;
    --qc-bg-surface-solid: #0d1222;
    --qc-bg-card: #131a2e;
    --qc-bg-card-hover: #19243d;
    --qc-bg-input: #060912;
    --qc-bg-hover: rgba(255, 255, 255, 0.06);
    --qc-bg-active: rgba(59, 130, 246, 0.15);

    --qc-text-main: #f8fafc;
    --qc-text-muted: #94a3b8;
    --qc-text-dim: #64748b;

    --qc-border-color: rgba(255, 255, 255, 0.09);
    --qc-border-strong: rgba(255, 255, 255, 0.16);
    --qc-border-focus: rgba(59, 130, 246, 0.5);

    --qc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --qc-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
    --qc-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.65);
    --qc-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);

    /* Code Highlight Dark */
    --hl-keyword: #38bdf8;
    --hl-string: #4ade80;
    --hl-number: #fbbf24;
    --hl-comment: #64748b;
    --hl-symbol: #f472b6;
}

/* Light Theme (Clean SaaS Light) */
[data-theme="light"] {
    --qc-bg-app: #f8fafc;
    --qc-bg-surface: #ffffff;
    --qc-bg-surface-solid: #ffffff;
    --qc-bg-card: #ffffff;
    --qc-bg-card-hover: #f1f5f9;
    --qc-bg-input: #f1f5f9;
    --qc-bg-hover: rgba(0, 0, 0, 0.04);
    --qc-bg-active: rgba(59, 130, 246, 0.09);

    --qc-text-main: #0f172a;
    --qc-text-muted: #475569;
    --qc-text-dim: #94a3b8;

    --qc-border-color: rgba(0, 0, 0, 0.09);
    --qc-border-strong: rgba(0, 0, 0, 0.16);
    --qc-border-focus: rgba(59, 130, 246, 0.5);

    --qc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --qc-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
    --qc-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
    --qc-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

    /* Code Highlight Light */
    --hl-keyword: #0284c7;
    --hl-string: #16a34a;
    --hl-number: #d97706;
    --hl-comment: #94a3b8;
    --hl-symbol: #db2777;
}