/* ========================================
   MERCHANT360 / VENDOREA DESIGN SYSTEM
   Enterprise B2B Commerce Platform
   ======================================== */

/* ----------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------- */
:root {
    /* =====================================
       VENDOREA ENTERPRISE BRAND TOKENS
       ===================================== */

    /* Vendorea Brand Colors */
    --vendorea-navy: #0D1B2A;
    --vendorea-blue: #1D4ED8;
    --vendorea-blue-dark: #1E3A8A;
    --vendorea-blue-light: #3B82F6;
    --vendorea-cyan: #0EA5E9;
    --vendorea-cyan-light: #38BDF8;

    /* Vendorea Surfaces */
    --vendorea-bg: #F4F8FB;
    --vendorea-panel: #F8FBFE;
    --vendorea-surface: #FFFFFF;

    /* Vendorea Text */
    --vendorea-text: #0F172A;
    --vendorea-text-secondary: #475569;
    --vendorea-muted: #64748B;
    --vendorea-soft: #94A3B8;

    /* Vendorea Borders */
    --vendorea-border: #D7E0EA;
    --vendorea-border-soft: #E7EEF5;

    /* Vendorea Status Colors */
    --vendorea-success: #16A34A;
    --vendorea-success-light: #DCFCE7;
    --vendorea-warning: #F59E0B;
    --vendorea-warning-light: #FEF3C7;
    --vendorea-danger: #DC2626;
    --vendorea-danger-light: #FEE2E2;
    --vendorea-info: #2563EB;
    --vendorea-info-light: #DBEAFE;

    /* Vendorea Gradients */
    --vendorea-gradient-header: linear-gradient(90deg, #0D1B2A, #1D4ED8, #0EA5E9);
    --vendorea-gradient-primary: linear-gradient(135deg, #1D4ED8, #1E3A8A);
    --vendorea-gradient-accent: linear-gradient(135deg, #0EA5E9, #0284C7);

    /* Vendorea Finance Module Colors (AR = Blue, AP = Purple) */
    --vendorea-ar-primary: #1D4ED8;
    --vendorea-ar-gradient: linear-gradient(90deg, #0D1B2A, #1D4ED8, #0EA5E9);
    --vendorea-ap-primary: #7C3AED;
    --vendorea-ap-gradient: linear-gradient(90deg, #0D1B2A, #7C3AED, #A855F7);

    /* Module Color System - Used for page headers and branding */
    --module-dashboard: #1D4ED8;
    --module-dashboard-gradient: linear-gradient(90deg, #0D1B2A, #1D4ED8, #0EA5E9);
    --module-dashboard-light: #DBEAFE;

    --module-orders: #2563EB;
    --module-orders-gradient: linear-gradient(90deg, #0D1B2A, #2563EB, #3B82F6);
    --module-orders-light: #DBEAFE;

    --module-inventory: #059669;
    --module-inventory-gradient: linear-gradient(90deg, #064E3B, #059669, #10B981);
    --module-inventory-light: #D1FAE5;

    --module-customers: #7C3AED;
    --module-customers-gradient: linear-gradient(90deg, #4C1D95, #7C3AED, #A855F7);
    --module-customers-light: #EDE9FE;

    --module-invoices: #0891B2;
    --module-invoices-gradient: linear-gradient(90deg, #164E63, #0891B2, #22D3EE);
    --module-invoices-light: #CFFAFE;

    --module-finance: #1D4ED8;
    --module-finance-gradient: linear-gradient(90deg, #0D1B2A, #1D4ED8, #0EA5E9);
    --module-finance-light: #DBEAFE;

    --module-settings: #64748B;
    --module-settings-gradient: linear-gradient(90deg, #1E293B, #64748B, #94A3B8);
    --module-settings-light: #F1F5F9;

    --module-network: #0891B2;
    --module-network-gradient: linear-gradient(90deg, #164E63, #0891B2, #22D3EE);
    --module-network-light: #CFFAFE;

    --module-reports: #EA580C;
    --module-reports-gradient: linear-gradient(90deg, #7C2D12, #EA580C, #FB923C);
    --module-reports-light: #FFEDD5;

    --module-quotes: #8B5CF6;
    --module-quotes-gradient: linear-gradient(90deg, #5B21B6, #8B5CF6, #A78BFA);
    --module-quotes-light: #EDE9FE;

    --module-catalog: #0D9488;
    --module-catalog-gradient: linear-gradient(90deg, #134E4A, #0D9488, #2DD4BF);
    --module-catalog-light: #CCFBF1;

    --module-returns: #EA580C;
    --module-returns-gradient: linear-gradient(90deg, #7C2D12, #EA580C, #FB923C);
    --module-returns-light: #FFEDD5;

    /* Vendorea Shadows */
    --vendorea-shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.04);
    --vendorea-shadow-md: 0 4px 14px rgba(13, 27, 42, 0.06);
    --vendorea-shadow-lg: 0 8px 20px rgba(13, 27, 42, 0.08);

    /* Vendorea Radius (Enterprise - smaller, sharper) */
    --vendorea-radius-sm: 6px;
    --vendorea-radius-md: 8px;
    --vendorea-radius-lg: 12px;
    --vendorea-radius-xl: 14px;

    /* =====================================
       ORIGINAL MERCHANT360 TOKENS
       ===================================== */

    /* Primary Brand Colors */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #dbeafe;
    --primary-dark: #1e40af;

    /* Accent Colors (CTAs & Highlights) */
    --accent: #f97316;
    --accent-hover: #ea580c;
    --accent-light: #ffedd5;

    /* E-commerce Semantic Colors */
    --sale: #ef4444;
    --sale-hover: #dc2626;
    --sale-light: #fef2f2;
    --success: #10b981;
    --success-hover: #059669;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-hover: #d97706;
    --warning-light: #fef3c7;
    --info: #06b6d4;
    --info-hover: #0891b2;
    --info-light: #cffafe;

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Surface Colors */
    --surface: #ffffff;
    --surface-elevated: #f8fafc;
    --surface-hover: #f1f5f9;
    --surface-active: #e2e8f0;
    --body-bg: #f1f5f9;

    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-hero-alt: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-cta: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-premium: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-dark: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3);
    --shadow-glow-accent: 0 0 20px rgba(249, 115, 22, 0.3);

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Poppins', var(--font-sans);
    --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* Layout */
    --header-height: 70px;
    --sidebar-width: 280px;
    --container-max: 1320px;
    --mobile-nav-height: 60px;
}

/* ----------------------------------------
   Base Styles
   ---------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--body-bg);
}

/* ----------------------------------------
   Typography Utilities
   ---------------------------------------- */
.font-display {
    font-family: var(--font-display);
}

.text-gradient {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Heading Styles */
h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

h3, .h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

h4, .h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

h5, .h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

h6, .h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

/* ----------------------------------------
   Link Styles
   ---------------------------------------- */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* ----------------------------------------
   Selection Styles
   ---------------------------------------- */
::selection {
    background-color: var(--primary);
    color: var(--text-inverse);
}

/* ----------------------------------------
   Scrollbar Styles
   ---------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ----------------------------------------
   Focus Styles
   ---------------------------------------- */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   Utility Classes
   ---------------------------------------- */
.bg-gradient-hero {
    background: var(--gradient-hero);
}

.bg-gradient-cta {
    background: var(--gradient-cta);
}

.bg-gradient-success {
    background: var(--gradient-success);
}

.bg-gradient-dark {
    background: var(--gradient-dark);
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.shadow-glow-accent {
    box-shadow: var(--shadow-glow-accent);
}

/* Text Colors */
.text-primary-brand {
    color: var(--primary);
}

.text-accent {
    color: var(--accent);
}

.text-sale {
    color: var(--sale);
}

.text-success-brand {
    color: var(--success);
}

/* ----------------------------------------
   Container Enhancements
   ---------------------------------------- */
.container-fluid {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------
   Transition Utilities
   ---------------------------------------- */
.transition-fast {
    transition: all var(--transition-fast);
}

.transition-base {
    transition: all var(--transition-base);
}

.transition-slow {
    transition: all var(--transition-slow);
}

/* ----------------------------------------
   Animation Keyframes
   ---------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp var(--transition-slow) ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown var(--transition-slow) ease-out;
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-slow) ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-slow) ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-scale-in {
    animation: scaleIn var(--transition-base) ease-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ----------------------------------------
   Responsive Breakpoints Reference
   xs: 0
   sm: 576px
   md: 768px
   lg: 992px
   xl: 1200px
   xxl: 1400px
   ---------------------------------------- */