/* ==========================================================================
   Design Tokens - AI Tools Intelligence Hub
   
   Based on unified design system specification
   All values should be used via CSS variables throughout the application
   ========================================================================== */

:root {
  /* ==========================================================================
     Colors
     ========================================================================== */
  
  /* Primary Brand Colors */
  --color-primary: #3B82F6;        /* Main brand blue - used for CTAs, links, active states */
  --color-primary-hover: #2563EB;  /* Darker blue for hover states */
  --color-primary-active: #1D4ED8; /* Even darker for active/pressed states */
  
  /* Neutral Colors - Dark Theme */
  --color-bg-primary: #0A0A0A;     /* Main background */
  --color-bg-secondary: #141414;   /* Card backgrounds */
  --color-bg-tertiary: #1F1F1F;    /* Elevated surfaces */
  --color-bg-hover: #2A2A2A;       /* Hover state for cards */
  
  /* Text Colors */
  --color-text-primary: #FFFFFF;   /* Main text */
  --color-text-secondary: #A3A3A3; /* Secondary text, labels */
  --color-text-muted: #737373;     /* Disabled, very low emphasis */
  
  /* Border Colors */
  --color-border-primary: #2A2A2A; /* Main borders */
  --color-border-secondary: #404040; /* Lighter borders for emphasis */
  
  /* Semantic Colors */
  --color-success: #10B981;        /* Success states */
  --color-warning: #F59E0B;        /* Warning states */
  --color-error: #EF4444;          /* Error states */
  --color-info: #3B82F6;           /* Info states (same as primary) */
  
  /* ==========================================================================
     Typography
     ========================================================================== */
  
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Monaco', 'Consolas', 'Courier New', monospace;
  
  /* Font Sizes - Desktop */
  --text-xs: 0.75rem;    /* 12px - ONLY for tiny labels */
  --text-sm: 0.875rem;   /* 14px - Minimum for body text */
  --text-base: 1rem;     /* 16px - Default body text */
  --text-lg: 1.125rem;   /* 18px - Emphasized text */
  --text-xl: 1.25rem;    /* 20px - Small headings */
  --text-2xl: 1.5rem;    /* 24px - Section headings */
  --text-3xl: 1.875rem;  /* 30px - Page headings */
  --text-4xl: 2.25rem;   /* 36px - Hero headings */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* ==========================================================================
     Spacing
     ========================================================================== */
  
  /* Spacing Scale */
  --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 - Default card padding */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  
  /* ==========================================================================
     Layout
     ========================================================================== */
  
  /* Border Radius */
  --radius-sm: 0.375rem;  /* 6px - Small elements */
  --radius-md: 0.5rem;    /* 8px - Default radius */
  --radius-lg: 0.75rem;   /* 12px - Cards, modals */
  --radius-xl: 1rem;      /* 16px - Large cards */
  --radius-full: 9999px;  /* Pills, circles */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3);
  
  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;
  
  /* ==========================================================================
     Animation
     ========================================================================== */
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  
  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  
  /* ==========================================================================
     Breakpoints (for reference in JS)
     ========================================================================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ==========================================================================
   Mobile Overrides
   Ensure minimum readability on small screens
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    /* Increase minimum font sizes on mobile */
    --text-sm: 0.875rem;   /* Keep 14px minimum */
    --text-base: 0.9375rem; /* 15px for better mobile readability */
    
    /* Adjust spacing for mobile */
    --space-6: 1.25rem;    /* 20px card padding on mobile */
    --space-8: 1.5rem;     /* 24px */
  }
}

/* ==========================================================================
   Utility: Enforce Minimum Font Size
   Safety net to catch any text smaller than 14px
   ========================================================================== */

* {
  /* Uncomment to enforce minimum font size globally */
  /* min-font-size: var(--text-sm); */
}

/* Debug mode - uncomment to highlight small text */
/*
*[style*="font-size"] {
  outline: 2px solid red !important;
}
*/