/**
 * ExpoLead SaaS - Design System Variables & Design Tokens
 * 100% Vanilla CSS - Zero Node.js Build Required
 * Modern Crisp White / Light Enterprise SaaS Theme
 */

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

:root {
    /* Primary Brand Colors (Indigo / Violet) */
    --color-primary-h: 243;
    --color-primary-s: 75%;
    --color-primary-l: 58%;
    --primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
    --primary-hover: hsl(var(--color-primary-h), var(--color-primary-s), 50%);
    --primary-active: hsl(var(--color-primary-h), var(--color-primary-s), 42%);
    --primary-light: #EEF2FF;
    --primary-glow: rgba(79, 70, 229, 0.18);

    /* Secondary Accent (Sky / Cyan) */
    --accent: #0284C7;
    --accent-hover: #0369A1;
    --accent-light: #F0F9FF;

    /* Clean White Enterprise Surfaces */
    --bg-main: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F8FAFC;
    --bg-input: #FFFFFF;

    /* Border & Divider Colors */
    --border-subtle: #E2E8F0;
    --border-card: #E2E8F0;
    --border-focus: #6366F1;

    /* Typography Colors */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-inverse: #FFFFFF;

    /* Feedback & Status Colors */
    --color-success: #059669;
    --color-success-bg: #ECFDF5;
    --color-success-border: #A7F3D0;

    --color-danger: #DC2626;
    --color-danger-bg: #FEF2F2;
    --color-danger-border: #FECACA;

    --color-warning: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-warning-border: #FDE68A;

    --color-info: #2563EB;
    --color-info-bg: #EFF6FF;
    --color-info-border: #BFDBFE;

    /* Aliases */
    --danger: var(--color-danger);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --info: var(--color-info);
    --border-color: var(--border-card);

    /* Lead Priority Specific Colors */
    --priority-hot: #DC2626;
    --priority-warm: #D97706;
    --priority-cold: #2563EB;

    /* Typography Tokens */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Outfit', var(--font-sans);

    /* Border Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows & Elevation (Crisp Light Theme Multi-layer Shadows) */
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.03);
    --shadow-glow: 0 0 20px var(--primary-glow);

    /* Animation Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}