/**
 * Solafide Design System
 * Based on industry best practices: Google Material Design 3, Apple HIG, Stripe, QuickBooks, Odoo
 * WCAG 2.1 AA Compliant (Target: AAA where possible)
 * Version: 2.2 - Dark mode support added
 *
 * COLOR USAGE GUIDELINES (light mode only):
 * - Section headings: text-primary (Solafide blue for brand hierarchy)
 * - Primary text on white/gray-50: text-gray-600 (body), text-gray-500 (secondary)
 * - Primary blue (#1E40AF): buttons, links, accents. Use text-white on primary backgrounds.
 * - Footer on primary: use text-white for headings, text-blue-100 for body/links (good contrast on blue)
 * - Avoid text-gray-400 on white for body text (fails WCAG AA). Use gray-500 or darker.
 * - Cards: bg-white with border-gray-200. On gray-50 sections, cards stand out clearly.
 *
 * DARK MODE SUPPORT:
 * - Use Tailwind's dark: prefix for dark mode specific styles
 * - CSS variables are defined in base.html for consistent theming
 */

:root {
    /* ============================================
       BRAND COLOR PALETTE
       Based on current blue (#1E40AF), optimized for accessibility
       ============================================ */
    
    --color-brand-50: #EFF6FF;   /* Lightest - backgrounds */
    --color-brand-100: #DBEAFE;  /* Light backgrounds */
    --color-brand-200: #BFDBFE;  /* Subtle accents */
    --color-brand-300: #93C5FD;  /* Light accents */
    --color-brand-400: #60A5FA;  /* Medium-light (4.8:1 on white) */
    --color-brand-500: #3B82F6;  /* Medium (3.8:1 - use with caution) */
    --color-brand-600: #2563EB;  /* Medium-dark (4.8:1 on white) ✅ */
    --color-brand-700: #1D4ED8;  /* Dark */
    --color-brand-800: #1E40AF;  /* Primary (7.2:1 on white) ✅ */
    --color-brand-900: #1E3A8A;  /* Darker (8.1:1 on white) ✅ */
    --color-brand-950: #172554;  /* Darkest */
    
    /* ============================================
       SEMANTIC COLOR TOKENS
       Industry standard approach (Google/Apple/Stripe)
       ============================================ */
    
    /* Primary Action Colors */
    --color-primary: var(--color-brand-800);           /* #1E40AF - 7.2:1 ✅ */
    --color-primary-hover: var(--color-brand-900);     /* #1E3A8A - 8.1:1 ✅ */
    --color-primary-light: var(--color-brand-600);     /* #2563EB - 4.8:1 ✅ (fixed) */
    --color-primary-lighter: var(--color-brand-400);   /* #60A5FA - 4.8:1 ✅ */
    --color-on-primary: #FFFFFF;                       /* White - 7.2:1 ✅ */
    
    /* Surface Colors (Light Mode) */
    --color-surface: #FFFFFF;
    --color-surface-elevated: #F8FAFC;
    --color-surface-hover: #F1F5F9;
    --color-surface-active: #E2E8F0;
    --color-on-surface: #0F172A;                       /* 15.8:1 on white ✅ */
    --color-on-surface-secondary: #334155;            /* 5.8:1 on white ✅ (fixed) */
    --color-on-surface-muted: #64748B;                /* 4.5:1 on white ✅ */
    --color-on-surface-disabled: #94A3B8;             /* 2.8:1 - disabled state */
    
    /* Border Colors */
    --color-border: #E2E8F0;                          /* Subtle borders */
    --color-border-light: #F1F5F9;                    /* Very light borders */
    --color-border-strong: #CBD5E1;                    /* Stronger borders */
    --color-border-focus: var(--color-primary);        /* Focus states */
    
    /* Status Colors (WCAG AA Compliant) */
    --color-success: #059669;                         /* 4.5:1 on white ✅ */
    --color-success-light: #10B981;
    --color-success-bg: #D1FAE5;
    --color-on-success: #FFFFFF;
    
    --color-warning: #D97706;                         /* 4.5:1 on white ✅ */
    --color-warning-light: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-on-warning: #FFFFFF;
    
    --color-error: #DC2626;                           /* 5.1:1 on white ✅ */
    --color-error-light: #EF4444;
    --color-error-bg: #FEE2E2;
    --color-on-error: #FFFFFF;
    
    --color-info: #0284C7;                            /* 4.5:1 on white ✅ */
    --color-info-light: #0EA5E9;
    --color-info-bg: #E0F2FE;
    --color-on-info: #FFFFFF;
    
    /* ============================================
       TYPOGRAPHY SCALE
       Based on Stripe/Google Material Design
       ============================================ */
    
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    
    /* Font Sizes (rem-based for accessibility) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px - body text */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;      /* Body text */
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Headings use Solafide primary blue for brand hierarchy */
    --color-heading: var(--color-primary);
    
    /* ============================================
       SPACING SYSTEM
       4px base unit (Google/Stripe standard)
       ============================================ */
    
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-32: 8rem;        /* 128px */
    
    /* ============================================
       ELEVATION/SHADOW SYSTEM
       Material Design inspired
       ============================================ */
    
    --elevation-0: none;
    --elevation-1: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --elevation-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --elevation-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --elevation-4: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --elevation-5: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* ============================================
       BORDER RADIUS
       Consistent rounded corners
       ============================================ */
    
    --radius-none: 0;
    --radius-sm: 0.125rem;    /* 2px */
    --radius-base: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-full: 9999px;     /* Full circle */
    
    /* ============================================
       TRANSITIONS
       Smooth animations (Apple/Stripe style)
       ============================================ */
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ============================================
       Z-INDEX SCALE
       Layering system
       ============================================ */
    
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark mode removed - light mode only */

/* Hero section - base styling; background is provided per-page via template tag */
.hero-section {
    position: relative;
    color: #FFFFFF;
    overflow: hidden;
}

/* ============================================
   HERO & CTA GRADIENT SECTIONS - Failsafe
   Fixes white-on-white issue when Tailwind CDN
   gradient utilities don't apply custom colors
   ============================================ */
section[class*="from-primary"] {
    background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 50%, #1D4ED8 100%) !important;
}
section[class*="from-primary"][class*="text-white"] {
    color: #FFFFFF !important;
}
section[class*="from-primary"] h1,
section[class*="from-primary"] h2,
section[class*="from-primary"] p {
    color: inherit;
}
section[class*="from-primary"] .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* Preserve CTA buttons on gradient sections */
section[class*="from-primary"] .bg-white.text-primary,
section[class*="from-primary"] a.bg-white {
    background-color: #FFFFFF !important;
    color: var(--color-primary, #1E40AF) !important;
}
/* Right-direction gradient (e.g. CTA "Need a Custom Integration?") */
section[class*="from-primary"][class*="gradient-to-r"] {
    background: linear-gradient(to right, #1E40AF 0%, #1E3A8A 50%, #1D4ED8 100%) !important;
}
/* gradient-text on blue hero = use white for visibility */
section[class*="from-primary"] .gradient-text,
.gradient-bg .gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* ============================================
   UTILITY CLASSES
   Quick access to design tokens
   ============================================ */

/* Color Utilities - Professional Brand Colors */
.bg-primary { background-color: var(--color-primary, #1E40AF) !important; }
.bg-primary-hover:hover { background-color: var(--color-primary-hover, #1E3A8A) !important; }
.text-primary { color: var(--color-primary, #1E40AF) !important; }
.text-on-primary { color: var(--color-on-primary, #FFFFFF) !important; }

.bg-surface { background-color: var(--color-surface, #FFFFFF) !important; }
.bg-surface-elevated { background-color: var(--color-surface-elevated, #F8FAFC) !important; }
.bg-surface-hover:hover { background-color: var(--color-surface-hover, #F1F5F9) !important; }
.text-on-surface { color: var(--color-on-surface, #0F172A) !important; }
.text-on-surface-secondary { color: var(--color-on-surface-secondary, #334155) !important; }
.text-on-surface-muted { color: var(--color-on-surface-muted, #64748B) !important; }

.border-border { border-color: var(--color-border, #E2E8F0) !important; }
.border-focus:focus { border-color: var(--color-border-focus, #1E40AF) !important; }

/* Status Colors */
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-info { background-color: var(--color-info); }

.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

/* Typography Utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.leading-normal { line-height: var(--leading-normal); }
.leading-tight { line-height: var(--leading-tight); }
.leading-relaxed { line-height: var(--leading-relaxed); }

/* Spacing Utilities */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

/* Elevation Utilities */
.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }
.elevation-4 { box-shadow: var(--elevation-4); }

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   WCAG 2.1 AA/AAA compliance
   ============================================ */

/* Focus States (Apple/Stripe style) */
*:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support (light mode only) */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000000;
        --color-border-strong: #000000;
        --color-on-surface: #000000;
        --color-on-surface-secondary: #000000;
    }
}

/* ============================================
   RESPONSIVE GLOBAL FIXES
   Ensure no horizontal overflow on all devices
   ============================================ */
html {
    overflow-x: hidden;
}

/* Responsive images - prevent overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Touch-friendly tap targets on mobile */
@media (max-width: 768px) {
    .touch-target-min {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Print Styles */
@media print {
    :root {
        --color-surface: #FFFFFF;
        --color-on-surface: #000000;
        --elevation-1: none;
        --elevation-2: none;
        --elevation-3: none;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

/* Dark mode surface and text colors */
.dark {
    /* Override for dark mode */
    --color-surface: #1E293B;
    --color-surface-elevated: #334155;
    --color-surface-hover: #475569;
    --color-surface-active: #64748B;
    
    /* Brand colors adjusted for dark backgrounds */
    --color-brand-50: #1E3A8A;
    --color-brand-100: #1E40AF;
    --color-brand-200: #2563EB;
    --color-brand-300: #3B82F6;
    --color-brand-400: #60A5FA;
    --color-brand-500: #93C5FD;
    --color-brand-600: #BFDBFE;
    --color-brand-700: #DBEAFE;
    --color-brand-800: #EFF6FF;
    --color-brand-900: #F8FAFC;
    --color-brand-950: #FFFFFF;
    
    --color-primary: #3B82F6;
    --color-primary-hover: #60A5FA;
    --color-primary-light: #2563EB;
    --color-primary-lighter: #93C5FD;
    --color-on-primary: #FFFFFF;
    
    /* Text colors for dark mode */
    --color-on-surface: #F1F5F9;
    --color-on-surface-muted: #94A3B8;
    --color-on-surface-weak: #64748B;
    
    /* Border colors */
    --color-border: #334155;
    --color-border-strong: #475569;
    
    /* Elevation shadows - lighter for dark mode */
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3);
    --elevation-2: 0 4px 6px rgba(0, 0, 0, 0.3);
    --elevation-3: 0 10px 15px rgba(0, 0, 0, 0.3);
}

/* Dark mode specific element overrides */
.dark body {
    background-color: #0F172A;
    color: #F1F5F9;
}

.dark .bg-white {
    background-color: #1E293B !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: #0F172A !important;
}

.dark .text-gray-900 {
    color: #F1F5F9 !important;
}

.dark .text-gray-800 {
    color: #E2E8F0 !important;
}

.dark .text-gray-700 {
    color: #CBD5E1 !important;
}

.dark .text-gray-600 {
    color: #94A3B8 !important;
}

.dark .text-gray-500 {
    color: #64748B !important;
}

.dark .border-gray-200 {
    border-color: #334155 !important;
}

.dark .border-gray-100 {
    border-color: #1E293B !important;
}

.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1E293B;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748B;
}

.dark * {
    scrollbar-color: #475569 #1E293B;
}

/* =============================================================================
   CUSTOM COLOR — COMPLETE GRADIENT & BACKGROUND FALLBACKS
   Covers every from-/to-/via-/bg- pattern used across all templates.
   Loaded via <link> before Tailwind CDN, so these always render correctly.

   Color reference (matches Tailwind config in base.html):
     primary       #1E40AF   primary-dark  #1E3A8A   primary-light #2563EB
     accent-blue   #60A5FA   success       #059669   warning       #D97706
     danger        #DC2626   orange        #F97316   purple        #8B5CF6
     pink          #EC4899   teal          #0D9488
   ============================================================================= */

/* ── gradient direction (ensures background-image is set) ─────────────────── */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,        var(--tw-gradient-stops)); }
.bg-gradient-to-b  { background-image: linear-gradient(to bottom,       var(--tw-gradient-stops)); }
.bg-gradient-to-tr { background-image: linear-gradient(to top right,    var(--tw-gradient-stops)); }

/* ── FROM stops: brand colors ─────────────────────────────────────────────── */
.from-primary       { --tw-gradient-from: #1E40AF; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 64 175/0)); }
.from-primary-dark  { --tw-gradient-from: #1E3A8A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 58 138/0)); }
.from-primary-light { --tw-gradient-from: #2563EB; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(37 99 235/0)); }
.from-accent-blue   { --tw-gradient-from: #60A5FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(96 165 250/0)); }
.from-success       { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(5 150 105/0)); }
.from-warning       { --tw-gradient-from: #D97706; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(217 119 6/0)); }
.from-danger        { --tw-gradient-from: #DC2626; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(220 38 38/0)); }
.from-orange        { --tw-gradient-from: #F97316; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 115 22/0)); }
.from-purple        { --tw-gradient-from: #8B5CF6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(139 92 246/0)); }
.from-pink          { --tw-gradient-from: #EC4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(236 72 153/0)); }
.from-teal          { --tw-gradient-from: #0D9488; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(13 148 136/0)); }

/* FROM with opacity */
.from-primary\/5    { --tw-gradient-from: rgb(30 64 175/.05);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 64 175/0)); }
.from-primary\/10   { --tw-gradient-from: rgb(30 64 175/.10);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 64 175/0)); }
.from-primary\/20   { --tw-gradient-from: rgb(30 64 175/.20);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 64 175/0)); }
.from-primary-light\/5  { --tw-gradient-from: rgb(37 99 235/.05);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(37 99 235/0)); }
.from-accent-blue\/5    { --tw-gradient-from: rgb(96 165 250/.05); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(96 165 250/0)); }
.from-accent-blue\/10   { --tw-gradient-from: rgb(96 165 250/.10); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(96 165 250/0)); }
.from-success\/5    { --tw-gradient-from: rgb(5 150 105/.05);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(5 150 105/0)); }
.from-success\/10   { --tw-gradient-from: rgb(5 150 105/.10);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(5 150 105/0)); }
.from-warning\/5    { --tw-gradient-from: rgb(217 119 6/.05);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(217 119 6/0)); }
.from-warning\/10   { --tw-gradient-from: rgb(217 119 6/.10);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(217 119 6/0)); }
.from-orange\/5     { --tw-gradient-from: rgb(249 115 22/.05); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 115 22/0)); }
.from-orange\/10    { --tw-gradient-from: rgb(249 115 22/.10); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 115 22/0)); }
.from-purple\/5     { --tw-gradient-from: rgb(139 92 246/.05); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(139 92 246/0)); }
.from-purple\/10    { --tw-gradient-from: rgb(139 92 246/.10); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(139 92 246/0)); }
.from-primary\/10\/5   { --tw-gradient-from: rgb(30 64 175/.05);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 64 175/0)); }

/* ── TO stops: brand colors ───────────────────────────────────────────────── */
.to-primary       { --tw-gradient-to: #1E40AF; }
.to-primary-dark  { --tw-gradient-to: #1E3A8A; }
.to-primary-light { --tw-gradient-to: #2563EB; }
.to-accent-blue   { --tw-gradient-to: #60A5FA; }
.to-success       { --tw-gradient-to: #059669; }
.to-warning       { --tw-gradient-to: #D97706; }
.to-danger        { --tw-gradient-to: #DC2626; }
.to-orange        { --tw-gradient-to: #F97316; }
.to-purple        { --tw-gradient-to: #8B5CF6; }
.to-pink          { --tw-gradient-to: #EC4899; }
.to-teal          { --tw-gradient-to: #0D9488; }

/* TO with opacity */
.to-primary\/5      { --tw-gradient-to: rgb(30 64 175/.05); }
.to-primary\/10     { --tw-gradient-to: rgb(30 64 175/.10); }
.to-primary-dark\/5 { --tw-gradient-to: rgb(30 58 138/.05); }
.to-accent-blue\/5  { --tw-gradient-to: rgb(96 165 250/.05); }
.to-accent-blue\/10 { --tw-gradient-to: rgb(96 165 250/.10); }
.to-success\/10     { --tw-gradient-to: rgb(5 150 105/.10); }
.to-warning\/10     { --tw-gradient-to: rgb(217 119 6/.10); }
.to-orange-600\/5   { --tw-gradient-to: rgb(234 88 12/.05); }
.to-purple\/10      { --tw-gradient-to: rgb(139 92 246/.10); }
.to-indigo-dark\/5  { --tw-gradient-to: rgb(67 56 202/.05); }
.to-success-dark\/5 { --tw-gradient-to: rgb(4 120 87/.05); }
.to-green-600\/5    { --tw-gradient-to: rgb(22 163 74/.05); }

/* ── VIA stops ────────────────────────────────────────────────────────────── */
.via-primary      { --tw-gradient-stops: var(--tw-gradient-from), #1E40AF, var(--tw-gradient-to, rgb(30 64 175/0)); }
.via-primary-dark { --tw-gradient-stops: var(--tw-gradient-from), #1E3A8A, var(--tw-gradient-to, rgb(30 58 138/0)); }
.via-blue-50      { --tw-gradient-stops: var(--tw-gradient-from), #EFF6FF, var(--tw-gradient-to, rgb(239 246 255/0)); }

/* ── Solid background with opacity (custom colors) ────────────────────────── */
.bg-primary         { background-color: #1E40AF; }
.bg-primary-dark    { background-color: #1E3A8A; }
.bg-accent-blue     { background-color: #60A5FA; }
.bg-success         { background-color: #059669; }
.bg-warning         { background-color: #D97706; }
.bg-danger          { background-color: #DC2626; }
.bg-orange          { background-color: #F97316; }
.bg-purple          { background-color: #8B5CF6; }

.bg-primary\/5      { background-color: rgb(30 64 175/.05);  }
.bg-primary\/10     { background-color: rgb(30 64 175/.10);  }
.bg-primary\/20     { background-color: rgb(30 64 175/.20);  }
.bg-primary\/25     { background-color: rgb(30 64 175/.25);  }
.bg-primary\/30     { background-color: rgb(30 64 175/.30);  }
.bg-primary\/90     { background-color: rgb(30 64 175/.90);  }
.bg-primary-dark\/5 { background-color: rgb(30 58 138/.05);  }
.bg-primary-dark\/10{ background-color: rgb(30 58 138/.10);  }
.bg-accent-blue\/5  { background-color: rgb(96 165 250/.05); }
.bg-accent-blue\/10 { background-color: rgb(96 165 250/.10); }
.bg-accent-blue\/20 { background-color: rgb(96 165 250/.20); }
.bg-accent-blue\/30 { background-color: rgb(96 165 250/.30); }
.bg-success\/10     { background-color: rgb(5 150 105/.10);  }
.bg-success\/20     { background-color: rgb(5 150 105/.20);  }
.bg-warning\/10     { background-color: rgb(217 119 6/.10);  }
.bg-orange\/10      { background-color: rgb(249 115 22/.10); }
.bg-purple\/10      { background-color: rgb(139 92 246/.10); }
.bg-danger\/10      { background-color: rgb(220 38 38/.10);  }

/* ── Text colors (custom) ─────────────────────────────────────────────────── */
.text-primary       { color: #1E40AF; }
.text-primary-dark  { color: #1E3A8A; }
.text-primary-light { color: #2563EB; }
.text-accent-blue   { color: #60A5FA; }
.text-success       { color: #059669; }
.text-warning       { color: #D97706; }
.text-danger        { color: #DC2626; }
.text-orange        { color: #F97316; }
.text-purple        { color: #8B5CF6; }
.text-primary\/80   { color: rgb(30 64 175/.80); }

/* ── Border colors (custom) ───────────────────────────────────────────────── */
.border-primary\/10     { border-color: rgb(30 64 175/.10); }
.border-primary\/20     { border-color: rgb(30 64 175/.20); }
.border-primary\/30     { border-color: rgb(30 64 175/.30); }
.border-primary-light\/10 { border-color: rgb(37 99 235/.10); }
.border-accent-blue\/10 { border-color: rgb(96 165 250/.10); }
.border-success\/10     { border-color: rgb(5 150 105/.10); }
.border-warning\/10     { border-color: rgb(217 119 6/.10); }
.border-orange\/10      { border-color: rgb(249 115 22/.10); }
.border-purple\/10      { border-color: rgb(139 92 246/.10); }
.border-danger\/10      { border-color: rgb(220 38 38/.10); }
.border-primary         { border-color: #1E40AF; }
.border-success         { border-color: #059669; }
.border-warning         { border-color: #D97706; }
.border-danger          { border-color: #DC2626; }

/* ── Pre-built named gradients (most common site-wide combos) ─────────────── */
/* These provide one-class gradient shortcuts that don't rely on Tailwind at all */
.bg-gradient-primary         { background-image: linear-gradient(to bottom right, #1E40AF, #1E3A8A); }
.bg-gradient-primary-accent  { background-image: linear-gradient(to bottom right, #1E40AF, #1E3A8A, #60A5FA); }
.bg-gradient-success         { background-image: linear-gradient(to bottom right, #059669, #15803D); }
.bg-gradient-warning         { background-image: linear-gradient(to bottom right, #D97706, #EA580C); }
.bg-gradient-purple          { background-image: linear-gradient(to bottom right, #8B5CF6, #EC4899); }