/* ============================================
   FABSOFT CSS VARIABLES - Brand Design System
   ============================================
   Updated: January 28, 2026
   
   HOW TO CHANGE COLORS:
   - To change the primary accent color, update --fs-accent
   - To change the dark theme background, update --fs-dark
   - All components using these variables will update automatically
   ============================================ */

:root {
  /* ========================================
     PRIMARY BRAND COLORS (Easy to adjust)
     ======================================== */
  
  /* Main Accent Color - Change this to update buttons, links, highlights */
  --fs-accent: #C41E3A;           /* FabSoft Red */
  --fs-accent-hover: #A01830;     /* Darker red for hover states */
  --fs-accent-light: #E63950;     /* Lighter red for backgrounds */
  --fs-accent-rgb: 196, 30, 58;   /* RGB values for rgba() usage */
  
  /* Dark Theme Colors - For hero sections and dark backgrounds */
  --fs-dark: #1a1a2e;             /* Primary dark purple */
  --fs-dark-secondary: #16213e;   /* Secondary dark for gradients */
  --fs-dark-rgb: 26, 26, 46;      /* RGB values for rgba() usage */
  
  /* ========================================
     GRADIENT DEFINITIONS
     ======================================== */
  
  /* Hero/Header gradient - dark purple theme */
  --fs-gradient-dark: linear-gradient(135deg, var(--fs-dark) 0%, var(--fs-dark-secondary) 50%, var(--fs-dark) 100%);
  --fs-gradient-dark-vertical: linear-gradient(180deg, var(--fs-dark) 0%, var(--fs-dark-secondary) 100%);
  
  /* Accent gradient for CTAs */
  --fs-gradient-accent: linear-gradient(135deg, var(--fs-accent) 0%, var(--fs-accent-hover) 100%);
  
  /* ========================================
     TEXT COLORS
     ======================================== */
  
  --fs-text-dark: #1D1D1F;        /* Primary text on light backgrounds */
  --fs-text-medium: #424245;      /* Secondary text */
  --fs-text-light: #86868B;       /* Muted/tertiary text */
  --fs-text-white: #ffffff;       /* Text on dark backgrounds */
  --fs-text-white-muted: rgba(255, 255, 255, 0.8);  /* Muted white text */
  --fs-text-white-subtle: rgba(255, 255, 255, 0.6); /* Subtle white text */
  
  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  
  --fs-bg-white: #ffffff;
  --fs-bg-light: #F5F5F7;         /* Light gray sections */
  --fs-bg-lighter: #FAFAFA;       /* Very light gray */
  --fs-bg-dark: var(--fs-dark);
  --fs-bg-dark-card: rgba(255, 255, 255, 0.05);     /* Cards on dark bg */
  --fs-bg-dark-hover: rgba(255, 255, 255, 0.1);     /* Hover on dark bg */
  
  /* ========================================
     BORDER COLORS
     ======================================== */
  
  --fs-border-light: #E5E5E7;     /* Borders on light backgrounds */
  --fs-border-dark: rgba(255, 255, 255, 0.1);       /* Borders on dark bg */
  --fs-border-dark-hover: rgba(255, 255, 255, 0.2); /* Hover borders on dark */
  
  /* ========================================
     BUTTON STYLES
     ======================================== */
  
  /* Primary button (filled accent color) */
  --fs-btn-primary-bg: var(--fs-accent);
  --fs-btn-primary-bg-hover: var(--fs-accent-hover);
  --fs-btn-primary-text: var(--fs-text-white);
  
  /* Secondary button (outline on dark bg) */
  --fs-btn-secondary-bg: transparent;
  --fs-btn-secondary-bg-hover: rgba(255, 255, 255, 0.1);
  --fs-btn-secondary-border: var(--fs-text-white);
  --fs-btn-secondary-text: var(--fs-text-white);
  
  /* Tertiary button (outline on light bg) */
  --fs-btn-tertiary-bg: transparent;
  --fs-btn-tertiary-bg-hover: var(--fs-accent);
  --fs-btn-tertiary-border: var(--fs-accent);
  --fs-btn-tertiary-text: var(--fs-accent);
  --fs-btn-tertiary-text-hover: var(--fs-text-white);
  
  /* ========================================
     NAVIGATION STYLES
     ======================================== */
  
  --fs-nav-bg: transparent;       /* Nav is transparent over hero */
  --fs-nav-text: var(--fs-text-white);
  --fs-nav-text-hover: var(--fs-text-white);
  --fs-nav-dropdown-bg: var(--fs-bg-white);
  --fs-nav-dropdown-text: var(--fs-text-dark);
  
  /* ========================================
     CARD/COMPONENT STYLES
     ======================================== */
  
  --fs-card-bg: var(--fs-bg-white);
  --fs-card-border: var(--fs-border-light);
  --fs-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --fs-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  
  /* Cards on dark backgrounds */
  --fs-card-dark-bg: var(--fs-bg-dark-card);
  --fs-card-dark-border: var(--fs-border-dark);
  
  /* ========================================
     ICON/BADGE ACCENT BACKGROUNDS
     ======================================== */
  
  --fs-icon-bg: rgba(196, 30, 58, 0.15);           /* Light red bg for icons */
  --fs-icon-bg-hover: rgba(196, 30, 58, 0.25);
  --fs-badge-bg: var(--fs-accent);
  --fs-badge-text: var(--fs-text-white);
  
  /* Success/check marks */
  --fs-success: var(--fs-accent);  /* Using accent for consistency */
  --fs-success-bg: rgba(196, 30, 58, 0.1);
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  --fs-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-font-family-heading: var(--fs-font-family);
  
  /* Font Sizes */
  --fs-text-xs: 0.75rem;    /* 12px */
  --fs-text-sm: 0.875rem;   /* 14px */
  --fs-text-base: 1rem;     /* 16px */
  --fs-text-lg: 1.125rem;   /* 18px */
  --fs-text-xl: 1.25rem;    /* 20px */
  --fs-text-2xl: 1.5rem;    /* 24px */
  --fs-text-3xl: 1.875rem;  /* 30px */
  --fs-text-4xl: 2.25rem;   /* 36px */
  --fs-text-5xl: 3rem;      /* 48px */
  --fs-text-6xl: 3.75rem;   /* 60px */
  
  /* Font Weights */
  --fs-font-normal: 400;
  --fs-font-medium: 500;
  --fs-font-semibold: 600;
  --fs-font-bold: 700;
  
  /* Line Heights */
  --fs-leading-tight: 1.1;
  --fs-leading-snug: 1.25;
  --fs-leading-normal: 1.5;
  --fs-leading-relaxed: 1.625;
  
  /* ========================================
     SPACING
     ======================================== */
  
  --fs-space-1: 0.25rem;   /* 4px */
  --fs-space-2: 0.5rem;    /* 8px */
  --fs-space-3: 0.75rem;   /* 12px */
  --fs-space-4: 1rem;      /* 16px */
  --fs-space-5: 1.25rem;   /* 20px */
  --fs-space-6: 1.5rem;    /* 24px */
  --fs-space-8: 2rem;      /* 32px */
  --fs-space-10: 2.5rem;   /* 40px */
  --fs-space-12: 3rem;     /* 48px */
  --fs-space-16: 4rem;     /* 64px */
  --fs-space-20: 5rem;     /* 80px */
  --fs-space-24: 6rem;     /* 96px */
  
  /* ========================================
     LAYOUT
     ======================================== */
  
  --fs-container-sm: 640px;
  --fs-container-md: 768px;
  --fs-container-lg: 1024px;
  --fs-container-xl: 1200px;
  --fs-container-2xl: 1400px;
  
  /* ========================================
     BORDER RADIUS
     ======================================== */
  
  --fs-rounded-sm: 4px;
  --fs-rounded: 8px;
  --fs-rounded-md: 12px;
  --fs-rounded-lg: 16px;
  --fs-rounded-xl: 24px;
  --fs-rounded-full: 9999px;
  
  /* ========================================
     SHADOWS
     ======================================== */
  
  --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fs-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --fs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --fs-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  
  --fs-transition-fast: 150ms ease;
  --fs-transition: 200ms ease;
  --fs-transition-slow: 300ms ease;
  
  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  
  --fs-z-dropdown: 100;
  --fs-z-sticky: 200;
  --fs-z-fixed: 300;
  --fs-z-modal-backdrop: 400;
  --fs-z-modal: 500;
  --fs-z-tooltip: 600;
  
  /* ========================================
     LEGACY COMPATIBILITY
     These map old variable names to new ones
     ======================================== */
  
  --primary-blue: var(--fs-accent);  /* Now maps to red */
  --primary-blue-hover: var(--fs-accent-hover);
  --accent-red: var(--fs-accent);
  --success: var(--fs-accent);
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fs-transition-fast: 0ms;
    --fs-transition: 0ms;
    --fs-transition-slow: 0ms;
  }
}