/* ============================================
   NUMIVO DESIGN TOKENS v2.0
   CSS Custom Properties Implementation
   Updated: January 2025
   ============================================ */

   :root {
    /* ==========================================
       PRIMARY BRAND COLORS
       ========================================== */
    
    /* Primary Blues - Core Brand Identity */
    --numivo-color-primary: #2563EB;         /* Main brand blue - trustworthy but modern */
    --numivo-color-primary-dark: #1D4ED8;    /* Headers, authority elements */
    --numivo-color-primary-navy: #1E3A8A;    /* Deep trust, professional contexts */
    --numivo-color-primary-light: #3B82F6;   /* Lighter interactions, hover states */
    --numivo-color-primary-50: #EFF6FF;      /* Lightest tint for backgrounds */
    --numivo-color-primary-100: #DBEAFE;     /* Very light backgrounds */
    --numivo-color-primary-200: #BFDBFE;     /* Light borders, dividers */
    --numivo-color-primary-300: #93C5FD;     /* Subtle accents */
    --numivo-color-primary-400: #60A5FA;     /* Interactive elements */
    --numivo-color-primary-500: #3B82F6;     /* Standard primary */
    --numivo-color-primary-600: #2563EB;     /* Main brand */
    --numivo-color-primary-700: #1D4ED8;     /* Darker primary */
    --numivo-color-primary-800: #1E40AF;     /* Deep primary */
    --numivo-color-primary-900: #1E3A8A;     /* Navy primary */
    --numivo-color-primary-950: #172554;     /* Darkest primary */
  
    /* ==========================================
       ACCENT COLORS
       ========================================== */
    
    /* Orange - Primary CTA & Action Color */
    --numivo-color-accent-orange: #EA580C;     /* Primary CTAs, AI badges */
    --numivo-color-accent-orange-dark: #C2410C; /* Hover states, pressed buttons */
    --numivo-color-accent-orange-light: #FB923C; /* Light orange accents */
    --numivo-color-accent-orange-50: #FFF7ED;  /* Orange background tints */
    --numivo-color-accent-orange-100: #FFEDD5; /* Very light orange */
    --numivo-color-accent-orange-200: #FED7AA; /* Light orange */
    --numivo-color-accent-orange-300: #FDBA74; /* Medium light orange */
    --numivo-color-accent-orange-400: #FB923C; /* Standard orange */
    --numivo-color-accent-orange-500: #F97316; /* Default orange */
    --numivo-color-accent-orange-600: #EA580C; /* Main orange */
    --numivo-color-accent-orange-700: #C2410C; /* Dark orange */
    --numivo-color-accent-orange-800: #9A3412; /* Darker orange */
    --numivo-color-accent-orange-900: #7C2D12; /* Darkest orange */
  
    /* Green - Success & Growth */
    --numivo-color-accent-green: #059669;      /* Success states, positive actions */
    --numivo-color-accent-green-dark: #047857; /* Dark green for emphasis */
    --numivo-color-accent-green-light: #10B981; /* Light success indicators */
    --numivo-color-accent-green-50: #ECFDF5;   /* Success background tints */
    --numivo-color-accent-green-100: #D1FAE5;  /* Very light green */
    --numivo-color-accent-green-200: #A7F3D0;  /* Light green */
    --numivo-color-accent-green-300: #6EE7B7;  /* Medium light green */
    --numivo-color-accent-green-400: #34D399;  /* Standard green */
    --numivo-color-accent-green-500: #10B981;  /* Default green */
    --numivo-color-accent-green-600: #059669;  /* Main green */
    --numivo-color-accent-green-700: #047857;  /* Dark green */
    --numivo-color-accent-green-800: #065F46;  /* Darker green */
    --numivo-color-accent-green-900: #064E3B;  /* Darkest green */
  
    /* Yellow - Warnings & Highlights */
    --numivo-color-accent-yellow: #D97706;     /* Warning states, highlights */
    --numivo-color-accent-yellow-dark: #B45309; /* Dark yellow emphasis */
    --numivo-color-accent-yellow-light: #F59E0B; /* Light warning indicators */
    --numivo-color-accent-yellow-50: #FFFBEB;  /* Warning background tints */
    --numivo-color-accent-yellow-100: #FEF3C7; /* Very light yellow */
    --numivo-color-accent-yellow-200: #FDE68A; /* Light yellow */
    --numivo-color-accent-yellow-300: #FCD34D; /* Medium light yellow */
    --numivo-color-accent-yellow-400: #FBBF24; /* Standard yellow */
    --numivo-color-accent-yellow-500: #F59E0B; /* Default yellow */
    --numivo-color-accent-yellow-600: #D97706; /* Main yellow */
    --numivo-color-accent-yellow-700: #B45309; /* Dark yellow */
    --numivo-color-accent-yellow-800: #92400E; /* Darker yellow */
    --numivo-color-accent-yellow-900: #78350F; /* Darkest yellow */
  
    /* Red - Alerts & Critical */
    --numivo-color-accent-red: #DC2626;        /* Error states, critical alerts */
    --numivo-color-accent-red-dark: #B91C1C;   /* Dark red for emphasis */
    --numivo-color-accent-red-light: #EF4444;  /* Light error indicators */
    --numivo-color-accent-red-50: #FEF2F2;     /* Error background tints */
    --numivo-color-accent-red-100: #FEE2E2;    /* Very light red */
    --numivo-color-accent-red-200: #FECACA;    /* Light red */
    --numivo-color-accent-red-300: #FCA5A5;    /* Medium light red */
    --numivo-color-accent-red-400: #F87171;    /* Standard red */
    --numivo-color-accent-red-500: #EF4444;    /* Default red */
    --numivo-color-accent-red-600: #DC2626;    /* Main red */
    --numivo-color-accent-red-700: #B91C1C;    /* Dark red */
    --numivo-color-accent-red-800: #991B1B;    /* Darker red */
    --numivo-color-accent-red-900: #7F1D1D;    /* Darkest red */
  
    /* Cyan - Secondary Accents (retained from original) */
    --numivo-color-accent-cyan: #00E5D9;       /* Secondary accents, info states */
    --numivo-color-accent-cyan-dark: #00C4B8;  /* Dark cyan emphasis */
    --numivo-color-accent-cyan-light: #22D3EE; /* Light info indicators */
    --numivo-color-accent-cyan-50: #ECFEFF;    /* Info background tints */
    --numivo-color-accent-cyan-100: #CFFAFE;   /* Very light cyan */
    --numivo-color-accent-cyan-200: #A5F3FC;   /* Light cyan */
    --numivo-color-accent-cyan-300: #67E8F9;   /* Medium light cyan */
    --numivo-color-accent-cyan-400: #22D3EE;   /* Standard cyan */
    --numivo-color-accent-cyan-500: #06B6D4;   /* Default cyan */
    --numivo-color-accent-cyan-600: #0891B2;   /* Main cyan */
    --numivo-color-accent-cyan-700: #0E7490;   /* Dark cyan */
    --numivo-color-accent-cyan-800: #155E75;   /* Darker cyan */
    --numivo-color-accent-cyan-900: #164E63;   /* Darkest cyan */
  
    /* Pink - Soft Accents (retained from original) */
    --numivo-color-accent-pink: #FFB8D1;       /* Soft accents, decorative */
    --numivo-color-accent-pink-dark: #F472B6;  /* Dark pink emphasis */
    --numivo-color-accent-pink-light: #FBCFE8; /* Light pink accents */
    --numivo-color-accent-pink-50: #FDF2F8;    /* Pink background tints */
  
    /* ==========================================
       NEUTRAL COLORS
       ========================================== */
    
    /* Grays - Text & UI Elements */
    --numivo-color-neutral-white: #FFFFFF;
    --numivo-color-neutral-50: #F9FAFB;        /* Lightest backgrounds */
    --numivo-color-neutral-100: #F3F4F6;       /* Light backgrounds, cards */
    --numivo-color-neutral-200: #E5E7EB;       /* Borders, dividers */
    --numivo-color-neutral-300: #D1D5DB;       /* Disabled states, placeholders */
    --numivo-color-neutral-400: #9CA3AF;       /* Secondary text, icons */
    --numivo-color-neutral-500: #6B7280;       /* Body text, labels */
    --numivo-color-neutral-600: #4B5563;       /* Primary text */
    --numivo-color-neutral-700: #374151;       /* Headings, emphasis */
    --numivo-color-neutral-800: #1F2937;       /* Strong emphasis */
    --numivo-color-neutral-900: #111827;       /* Highest contrast text */
    --numivo-color-neutral-950: #030712;       /* Maximum contrast */
    --numivo-color-neutral-black: #000000;
  
    /* ==========================================
       SEMANTIC COLORS
       ========================================== */
    
    /* Success States */
    --numivo-color-success: var(--numivo-color-accent-green);
    --numivo-color-success-dark: var(--numivo-color-accent-green-dark);
    --numivo-color-success-light: var(--numivo-color-accent-green-light);
    --numivo-color-success-bg: var(--numivo-color-accent-green-50);
  
    /* Warning States */
    --numivo-color-warning: var(--numivo-color-accent-yellow);
    --numivo-color-warning-dark: var(--numivo-color-accent-yellow-dark);
    --numivo-color-warning-light: var(--numivo-color-accent-yellow-light);
    --numivo-color-warning-bg: var(--numivo-color-accent-yellow-50);
  
    /* Error States */
    --numivo-color-error: var(--numivo-color-accent-red);
    --numivo-color-error-dark: var(--numivo-color-accent-red-dark);
    --numivo-color-error-light: var(--numivo-color-accent-red-light);
    --numivo-color-error-bg: var(--numivo-color-accent-red-50);
  
    /* Info States */
    --numivo-color-info: var(--numivo-color-accent-cyan);
    --numivo-color-info-dark: var(--numivo-color-accent-cyan-dark);
    --numivo-color-info-light: var(--numivo-color-accent-cyan-light);
    --numivo-color-info-bg: var(--numivo-color-accent-cyan-50);
  
    /* ==========================================
       TYPOGRAPHY TOKENS
       ========================================== */
    
    /* Font Families */
    --numivo-font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --numivo-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
    /* Font Weights */
    --numivo-font-weight-thin: 100;
    --numivo-font-weight-light: 300;
    --numivo-font-weight-normal: 400;
    --numivo-font-weight-medium: 500;
    --numivo-font-weight-semibold: 600;
    --numivo-font-weight-bold: 700;
    --numivo-font-weight-extrabold: 800;
    --numivo-font-weight-black: 900;
  
    /* Font Sizes */
    --numivo-font-size-xs: 0.75rem;      /* 12px */
    --numivo-font-size-sm: 0.875rem;     /* 14px */
    --numivo-font-size-base: 1rem;       /* 16px */
    --numivo-font-size-lg: 1.125rem;     /* 18px */
    --numivo-font-size-xl: 1.25rem;      /* 20px */
    --numivo-font-size-2xl: 1.5rem;      /* 24px */
    --numivo-font-size-3xl: 1.875rem;    /* 30px */
    --numivo-font-size-4xl: 2.25rem;     /* 36px */
    --numivo-font-size-5xl: 3rem;        /* 48px */
    --numivo-font-size-6xl: 3.75rem;     /* 60px */
    --numivo-font-size-7xl: 4.5rem;      /* 72px */
    --numivo-font-size-8xl: 6rem;        /* 96px */
    --numivo-font-size-9xl: 8rem;        /* 128px */
  
    /* Line Heights */
    --numivo-line-height-none: 1;
    --numivo-line-height-tight: 1.25;
    --numivo-line-height-snug: 1.375;
    --numivo-line-height-normal: 1.5;
    --numivo-line-height-relaxed: 1.625;
    --numivo-line-height-loose: 2;
  
    /* Letter Spacing */
    --numivo-letter-spacing-tighter: -0.05em;
    --numivo-letter-spacing-tight: -0.025em;
    --numivo-letter-spacing-normal: 0em;
    --numivo-letter-spacing-wide: 0.025em;
    --numivo-letter-spacing-wider: 0.05em;
    --numivo-letter-spacing-widest: 0.1em;
  
    /* ==========================================
       SPACING TOKENS
       ========================================== */
    
    --numivo-spacing-0: 0;
    --numivo-spacing-px: 1px;
    --numivo-spacing-0-5: 0.125rem;   /* 2px */
    --numivo-spacing-1: 0.25rem;      /* 4px */
    --numivo-spacing-1-5: 0.375rem;   /* 6px */
    --numivo-spacing-2: 0.5rem;       /* 8px */
    --numivo-spacing-2-5: 0.625rem;   /* 10px */
    --numivo-spacing-3: 0.75rem;      /* 12px */
    --numivo-spacing-3-5: 0.875rem;   /* 14px */
    --numivo-spacing-4: 1rem;         /* 16px */
    --numivo-spacing-5: 1.25rem;      /* 20px */
    --numivo-spacing-6: 1.5rem;       /* 24px */
    --numivo-spacing-7: 1.75rem;      /* 28px */
    --numivo-spacing-8: 2rem;         /* 32px */
    --numivo-spacing-9: 2.25rem;      /* 36px */
    --numivo-spacing-10: 2.5rem;      /* 40px */
    --numivo-spacing-11: 2.75rem;     /* 44px */
    --numivo-spacing-12: 3rem;        /* 48px */
    --numivo-spacing-14: 3.5rem;      /* 56px */
    --numivo-spacing-16: 4rem;        /* 64px */
    --numivo-spacing-20: 5rem;        /* 80px */
    --numivo-spacing-24: 6rem;        /* 96px */
    --numivo-spacing-28: 7rem;        /* 112px */
    --numivo-spacing-32: 8rem;        /* 128px */
    --numivo-spacing-36: 9rem;        /* 144px */
    --numivo-spacing-40: 10rem;       /* 160px */
    --numivo-spacing-44: 11rem;       /* 176px */
    --numivo-spacing-48: 12rem;       /* 192px */
    --numivo-spacing-52: 13rem;       /* 208px */
    --numivo-spacing-56: 14rem;       /* 224px */
    --numivo-spacing-60: 15rem;       /* 240px */
    --numivo-spacing-64: 16rem;       /* 256px */
    --numivo-spacing-72: 18rem;       /* 288px */
    --numivo-spacing-80: 20rem;       /* 320px */
    --numivo-spacing-96: 24rem;       /* 384px */
  
    /* ==========================================
       BORDER RADIUS TOKENS
       ========================================== */
    
    --numivo-radius-none: 0;
    --numivo-radius-xs: 0.0625rem;     /* 1px */
    --numivo-radius-sm: 0.125rem;     /* 2px */
    --numivo-radius-base: 0.25rem;    /* 4px */
    --numivo-radius-md: 0.375rem;     /* 6px */
    --numivo-radius-lg: 0.5rem;       /* 8px */
    --numivo-radius-xl: 0.75rem;      /* 12px */
    --numivo-radius-2xl: 1rem;        /* 16px */
    --numivo-radius-3xl: 1.5rem;      /* 24px */
    --numivo-radius-full: 9999px;     /* Fully rounded */
  
    /* ==========================================
       SHADOW TOKENS
       ========================================== */
    
    --numivo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --numivo-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --numivo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --numivo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --numivo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --numivo-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --numivo-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --numivo-shadow-none: 0 0 #0000;
  
    /* Brand-specific shadows */
    --numivo-shadow-primary: 0 4px 15px rgba(37, 99, 235, 0.15);
    --numivo-shadow-primary-lg: 0 8px 25px rgba(37, 99, 235, 0.2);
    --numivo-shadow-orange: 0 4px 15px rgba(234, 88, 12, 0.3);
    --numivo-shadow-orange-lg: 0 8px 25px rgba(234, 88, 12, 0.4);
    --numivo-shadow-green: 0 4px 15px rgba(5, 150, 105, 0.2);
    --numivo-shadow-red: 0 4px 15px rgba(220, 38, 38, 0.2);
  
    /* ==========================================
       Z-INDEX TOKENS
       ========================================== */
    
    --numivo-z-index-auto: auto;
    --numivo-z-index-0: 0;
    --numivo-z-index-10: 10;
    --numivo-z-index-20: 20;
    --numivo-z-index-30: 30;
    --numivo-z-index-40: 40;
    --numivo-z-index-50: 50;
    --numivo-z-index-dropdown: 1000;
    --numivo-z-index-sticky: 1020;
    --numivo-z-index-fixed: 1030;
    --numivo-z-index-modal-backdrop: 1040;
    --numivo-z-index-modal: 1050;
    --numivo-z-index-popover: 1060;
    --numivo-z-index-tooltip: 1070;
    --numivo-z-index-toast: 1080;
  
    /* ==========================================
       COMPONENT-SPECIFIC TOKENS
       ========================================== */
    
    /* Buttons */
    --numivo-button-padding-sm: var(--numivo-spacing-2) var(--numivo-spacing-3);
    --numivo-button-padding-md: var(--numivo-spacing-3) var(--numivo-spacing-6);
    --numivo-button-padding-lg: var(--numivo-spacing-4) var(--numivo-spacing-8);
    --numivo-button-radius: var(--numivo-radius-lg);
    --numivo-button-font-weight: var(--numivo-font-weight-semibold);
    --numivo-button-transition: all 0.2s ease-in-out;
  
    /* Cards */
    --numivo-card-padding: var(--numivo-spacing-6);
    --numivo-card-radius: var(--numivo-radius-xl);
    --numivo-card-shadow: var(--numivo-shadow-base);
    --numivo-card-border: 1px solid var(--numivo-color-neutral-200);
  
    /* Forms */
    --numivo-input-padding: var(--numivo-spacing-3) var(--numivo-spacing-4);
    --numivo-input-radius: var(--numivo-radius-md);
    --numivo-input-border: 1px solid var(--numivo-color-neutral-300);
    --numivo-input-border-focus: 2px solid var(--numivo-color-primary);
    --numivo-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
    /* Navigation */
    --numivo-nav-height: 4rem;
    --numivo-nav-padding: var(--numivo-spacing-4) var(--numivo-spacing-6);
    --numivo-nav-shadow: var(--numivo-shadow-sm);
  
    /* ==========================================
       BRAND LOGO TOKENS
       ========================================== */
    
    /* Logo Colors */
    --numivo-logo-primary: var(--numivo-color-primary);
    --numivo-logo-accent-cyan: var(--numivo-color-accent-cyan);
    --numivo-logo-accent-yellow: var(--numivo-color-accent-yellow);
    --numivo-logo-accent-pink: var(--numivo-color-accent-pink);
    --numivo-logo-accent-red: var(--numivo-color-accent-red);
    --numivo-logo-ai-badge: var(--numivo-color-accent-orange);
  
    /* Logo Sizing */
    --numivo-logo-size-sm: 24px;
    --numivo-logo-size-md: 32px;
    --numivo-logo-size-lg: 48px;
    --numivo-logo-size-xl: 64px;
  
    /* ==========================================
       ANIMATION TOKENS
       ========================================== */
    
    /* Duration */
    --numivo-duration-instant: 0ms;
    --numivo-duration-fast: 150ms;
    --numivo-duration-normal: 300ms;
    --numivo-duration-slow: 500ms;
    --numivo-duration-slower: 750ms;
  
    /* Easing */
    --numivo-ease-linear: linear;
    --numivo-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --numivo-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --numivo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --numivo-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
    /* ==========================================
       BREAKPOINT TOKENS
       ========================================== */
    
    --numivo-breakpoint-sm: 640px;
    --numivo-breakpoint-md: 768px;
    --numivo-breakpoint-lg: 1024px;
    --numivo-breakpoint-xl: 1280px;
    --numivo-breakpoint-2xl: 1536px;
  }
  
  /* ==========================================
     DARK MODE OVERRIDES
     ========================================== */
  
  @media (prefers-color-scheme: dark) {
    :root {
      /* Invert neutral colors for dark mode */
      --numivo-color-neutral-50: #1F2937;
      --numivo-color-neutral-100: #374151;
      --numivo-color-neutral-200: #4B5563;
      --numivo-color-neutral-300: #6B7280;
      --numivo-color-neutral-400: #9CA3AF;
      --numivo-color-neutral-500: #D1D5DB;
      --numivo-color-neutral-600: #E5E7EB;
      --numivo-color-neutral-700: #F3F4F6;
      --numivo-color-neutral-800: #F9FAFB;
      --numivo-color-neutral-900: #FFFFFF;
  
      /* Adjust primary colors for better dark mode contrast */
      --numivo-color-primary-50: #172554;
      --numivo-color-primary-100: #1E3A8A;
      --numivo-color-primary-200: #1E40AF;
    }
  }
  
  /* ==========================================
     UTILITY CLASSES (Optional)
     ========================================== */
  
  .numivo-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .numivo-focus-visible {
    outline: 2px solid var(--numivo-color-primary);
    outline-offset: 2px;
  }
  
  .numivo-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* ==========================================
     USAGE EXAMPLES (Remove in production)
     ========================================== */
  
  /*
  EXAMPLE USAGE:
  
  .button-primary {
    background-color: var(--numivo-color-primary);
    color: var(--numivo-color-neutral-white);
    padding: var(--numivo-button-padding-md);
    border-radius: var(--numivo-button-radius);
    font-weight: var(--numivo-button-font-weight);
    box-shadow: var(--numivo-shadow-primary);
    transition: var(--numivo-button-transition);
  }
  
  .button-primary:hover {
    background-color: var(--numivo-color-primary-dark);
    box-shadow: var(--numivo-shadow-primary-lg);
  }
  
  .card {
    padding: var(--numivo-card-padding);
    border-radius: var(--numivo-card-radius);
    box-shadow: var(--numivo-card-shadow);
    border: var(--numivo-card-border);
    background-color: var(--numivo-color-neutral-white);
  }
  
  .text-success {
    color: var(--numivo-color-success);
  }
  
  .bg-warning-light {
    background-color: var(--numivo-color-warning-bg);
  }
*/