/* ========================================================================
   CSS DESIGN TOKENS - First Choice Cars
   Centralized CSS Custom Properties (Variables)
   
   Industry Best Practice: Single Source of Truth for Design System
   - All CSS variables consolidated in one location
   - Organized by category for easy navigation
   - Semantic naming for clarity and maintainability
   - Follows Design Token naming conventions
   
   Load Order: This file should be loaded FIRST before any other CSS
   ======================================================================== */

:root {
  /* ====================================================================
     1. BRAND COLORS - Primary Identity
     ==================================================================== */
  --gold-primary: #a08850;        /* Primary brand gold */
  --gold-secondary: #c6a76f;      /* Laser gold - official secondary */
  --gold-accessible: #8a6d39;     /* WCAG AA compliant gold for text */
  --gold-gradient: #b99657;       /* Use for gradients only */
  --gold-hover: #b99657;          /* Hover state for gold elements */
  
  --brand-gold: var(--gold-secondary);
  --brand-gold-hover: var(--gold-gradient);
  --brand-gold-dark: var(--gold-accessible);

  /* ====================================================================
     2. CORE COLORS - Foundation Palette
     ==================================================================== */
  --color-black: #000000;
  --color-white: #ffffff;

  /* ====================================================================
     3. GRAY SCALE - Neutral Palette (Light to Dark)
     ==================================================================== */
  --gray-50: #fafafa;             /* Lightest gray */
  --gray-100: #f8f9fa;            /* Very light gray */
  --gray-200: #f3f4f6;            /* Light gray */
  --gray-300: #e9ecef;            /* Light gray border */
  --gray-400: #dee2e6;            /* Medium-light gray */
  --gray-500: #d4d4d4;            /* Medium gray */
  --gray-600: #9b9b9b;            /* Medium-dark gray */
  --gray-700: #6c757d;            /* Dark gray */
  --gray-800: #495057;            /* Darker gray */
  --gray-900: #212529;            /* Darkest gray */

  /* ====================================================================
     4. DARK SHADES - Deep Tones
     ==================================================================== */
  --dark-100: #333333;            /* Light dark */
  --dark-200: #2c3e50;            /* Medium dark */
  --dark-300: #242424;            /* Dark */
  --dark-400: #1a1a1a;            /* Darker */
  --dark-500: #111111;            /* Darkest */

  /* ====================================================================
     5. SEMANTIC COLORS - State & Feedback
     ==================================================================== */
  
  /* Success Colors (Green) */
  --success-50: #f0fdf4;
  --success-100: #e8f5e8;
  --success-200: #d4edda;
  --success-300: #c3e6cb;
  --success-400: #28a745;         /* Primary success */
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #155724;

  /* Error Colors (Red) */
  --error-50: #fff5f5;
  --error-100: #fff8f8;
  --error-200: #f8d7da;
  --error-300: #f5c6cb;
  --error-400: #dc3545;           /* Primary error */
  --error-500: #d44950;
  --error-600: #c0392b;
  --error-700: #bd081c;
  --error-800: #721c24;

  /* Warning Colors (Orange/Yellow) */
  --warning-50: #fffbeb;
  --warning-100: #fffbf5;
  --warning-200: #fff9f0;
  --warning-300: #f59e0b;
  --warning-400: #ff9800;         /* Primary warning */
  --warning-500: #d97706;
  --warning-600: #be6440;

  /* Info Colors (Blue) */
  --info-light: #e7eaed;
  --info-border: #e8eaed;

  /* ====================================================================
     6. BOOTSTRAP COLOR OVERRIDES
     ==================================================================== */
  --success: var(--gold-secondary);
  --green: var(--gold-secondary);
  --bs-primary: #007bff;
  --bs-primary-dark: #0056b3;

  /* ====================================================================
     7. TEXT COLORS - Typography Hierarchy
     ==================================================================== */
  --text-muted: #999999;
  --text-dark: #2c3e50;
  --text-tertiary: #495057;
  --text-secondary: #6c757d;
  --text-primary: var(--color-black);

  /* ====================================================================
     8. BACKGROUND COLORS - Surface Tones
     ==================================================================== */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-lighter: #fafafa;
  --bg-lightest: #fefefe;
  --bg-gray: #f3f4f6;
  --bg-dark: var(--color-black);

  /* ====================================================================
     9. BORDER COLORS
     ==================================================================== */
  --border-gray: #d4d4d4;
  --border-dark: #e0e0e0;
  --border-darker: #eaeaea;
  --border-light: var(--gray-300);

  /* ====================================================================
     10. TYPOGRAPHY - Font Families
     ==================================================================== */
  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-monospace: "SF Mono", Monaco, Consolas, "Courier New", monospace;

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

  /* ====================================================================
     11. SPACING SYSTEM - Consistent Spacing Scale
     ==================================================================== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ====================================================================
     12. BORDER RADIUS - Rounding System
     ==================================================================== */
  --radius-sm: 4px;               /* Small elements */
  --radius-md: 8px;               /* Medium elements */
  --radius-lg: 12px;              /* Large elements */
  --radius-xl: 16px;              /* Extra large */
  --radius-pill: 9999px;          /* Pill shape */
  --radius-circle: 50%;           /* Perfect circle */

  /* Component-Specific Radius */
  --input-radius: 12px;           /* Form inputs - professional, modern */
  --btn-radius: 32px;             /* Buttons - distinctive pill shape */
  --card-radius: 12px;            /* Cards - slightly more rounded */

  /* ====================================================================
     13. BUTTON SYSTEM - Button Design Tokens
     ==================================================================== */
  --btn-padding-y: 10px;
  --btn-padding-x: 24px;
  --btn-padding-y-sm: 6px;
  --btn-padding-x-sm: 16px;
  --btn-padding-y-lg: 14px;
  --btn-padding-x-lg: 32px;
  
  --btn-font-size: 14px;
  --btn-font-size-sm: 12px;
  --btn-font-size-lg: 16px;
  --btn-font-weight: 600;
  --btn-text-transform: uppercase;
  --btn-letter-spacing: 0.5px;
  
  --btn-bg-default: var(--gray-100);
  --btn-bg-dark: var(--color-black);
  --btn-text-light: var(--color-white);
  --btn-text-dark: var(--gray-900);
  
  --btn-transition: all 0.3s ease;

  /* ====================================================================
     14. FOCUS STATES - Accessibility
     ==================================================================== */
  --focus-ring: 0 0 0 0.2rem rgba(198, 167, 111, 0.35);
  --focus-ring-primary: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  --focus-ring-error: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);

  /* ====================================================================
     15. SHADOWS - Elevation System
     ==================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ====================================================================
     16. TRANSITIONS - Animation Timing
     ==================================================================== */
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ====================================================================
     17. Z-INDEX SYSTEM - Stacking Order
     ==================================================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ====================================================================
     18. BREAKPOINTS - Responsive Design (Match Bootstrap 4.6.2)
     ==================================================================== */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* ====================================================================
     19. SOCIAL MEDIA & BRAND COLORS
     ==================================================================== */
  --social-facebook: #1877F2;
  --social-instagram: #E60023;
  --social-instagram-gradient-1: #8134AF;
  --social-instagram-gradient-2: #DD2A7B;
  --social-instagram-gradient-3: #e4405f;
  --social-linkedin: #0A66C2;
  --social-linkedin-alt: #0077b5;
  --social-tiktok: #000000;
  --social-tiktok-accent: #FF0050;
  --social-youtube: #FF0000;
  --social-pinterest: #E60023;
  --social-snapchat: #515BD4;
  --social-reddit: #ff9800;
  
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc05;
  --google-green: #34a853;

  /* ====================================================================
     20. CONTAINER & LAYOUT
     ==================================================================== */
  --container-max-width: 1200px;
  --container-padding: 15px;
  --grid-gutter: 30px;
}

/* ========================================================================
   END OF DESIGN TOKENS
   ======================================================================== */