/**
 * VEC Design System - CSS Variables
 * Single source of truth for all design tokens
 *
 * To change colors/typography/spacing site-wide:
 * 1. Update values here
 * 2. Update Elementor Global Settings to match
 * 3. Entire site reflects changes instantly
 */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Brand Colors */
  --color-primary: #da291c;           /* Vibrant red - CTAs, links, emphasis */
  --color-secondary: #FFECED;         /* Soft pink - backgrounds, accents */

  /* Neutral Colors */
  --color-dark-text: #333333;         /* Primary text color */
  --color-gray-text: #666666;         /* Secondary text color */
  --color-light-text: #999999;        /* Tertiary text color */
  --color-border: #e0e0e0;            /* Borders and dividers */
  --color-background: #ffffff;        /* Default background */
  --color-background-alt: #f8f8f8;    /* Alternative background */

  /* Semantic Colors (extend as needed) */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;


  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  /* Base Font Size (16px default) */
  --font-size-base: 1rem;

  /* Typography Scale (in REM) */
  --font-size-h1: 3.5rem;             /* 56px - Display 1 */
  --font-size-h2: 2.87rem;            /* ~46px - Display 2 */
  --font-size-h3: 1.5rem;             /* 24px - Item heading */
  --font-size-h4: 1.25rem;            /* 20px */
  --font-size-h5: 1.125rem;           /* 18px */
  --font-size-h6: 1rem;               /* 16px */

  /* Body Text Variants */
  --font-size-body: 1rem;             /* 16px - Standard paragraph */
  --font-size-body-large: 1.125rem;   /* 18px - Paragraph bigger */
  --font-size-body-small: 0.875rem;   /* 14px - Paragraph smaller */
  --font-size-caption: 0.75rem;       /* 12px - Labels, captions */

  /* Button Text */
  --font-size-button: 1.125rem;       /* 18px */
  --font-size-button-small: 1rem;     /* 16px */

  /* Line Heights */
  --line-height-h1: 3.87rem;
  --line-height-h2: 3.62rem;
  --line-height-h3: 2rem;
  --line-height-h4: 1.75rem;
  --line-height-h5: 1.625rem;
  --line-height-h6: 1.5rem;
  --line-height-body: 1.5rem;
  --line-height-body-large: 1.75rem;
  --line-height-body-small: 1.25rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;


  /* ========================================
     SPACING (8pt Grid System)
     Responsive values adjust on mobile
     ======================================== */

  /* Fixed Spacing (all breakpoints) */
  --space-2xs: 0.5rem;                /* 8px */
  --space-xs: 1rem;                   /* 16px */

  /* Responsive Spacing (desktop values) */
  --space-s: 1.5rem;                  /* 24px desktop, 16px mobile */
  --space-m: 2rem;                    /* 32px desktop, 24px mobile */
  --space-l: 3rem;                    /* 48px desktop, 32px mobile */
  --space-xl: 3.5rem;                 /* 56px desktop, 48px mobile */
  --space-2xl: 4rem;                  /* 64px desktop, 56px mobile */
  --space-3xl: 5rem;                  /* 80px desktop, 64px mobile */


  /* ========================================
     LAYOUT & COMPONENTS
     ======================================== */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;               /* For rounded buttons */

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
}


/* ========================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  :root {
    /* Reduce spacing on mobile/tablet */
    --space-s: 1rem;                  /* 16px */
    --space-m: 1.5rem;                /* 24px */
    --space-l: 2rem;                  /* 32px */
    --space-xl: 3rem;                 /* 48px */
    --space-2xl: 3.5rem;              /* 56px */
    --space-3xl: 4rem;                /* 64px */

    /* Optionally scale down headings on mobile */
    --font-size-h1: 2.5rem;           /* 40px on mobile */
    --font-size-h2: 2rem;             /* 32px on mobile */
  }
}