/* ==========================================================================
   core/variables.css - Shared CSS Custom Properties
   Foundation for all page styles - load FIRST
   Responsive: 1280x720 to 5120x2880 (5K)
   ========================================================================== */

:root {
  /* ==========================================================================
     BREAKPOINTS (for reference - use in media queries)
     ========================================================================== */
  /*
   * Mobile:  < 768px
   * Tablet:  768px - 1023px
   * Desktop: 1024px - 1279px
   * HD:      1280px - 1919px
   * FHD:     1920px - 2559px
   * 2K:      2560px - 3839px
   * 4K:      3840px - 5119px
   * 5K:      5120px+
   */

  /* ==========================================================================
     COLORS - Shared across all pages
     ========================================================================== */

  /* Neutral palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Text colors */
  --color-text-primary: #222222;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --color-text-light: #b3b3b3;
  --color-text-inverse: #ffffff;

  /* Link colors */
  --color-link: #0066cc;
  --color-link-hover: #0052a3;

  /* Active/highlight (golden - used in header) */
  --color-active: #c9a227;

  /* Footer colors */
  --color-footer-bg-start: #1a1a1a;
  --color-footer-bg-end: #0d0d0d;
  --color-footer-text: #cccccc;
  --color-footer-text-muted: #999999;

  /* ==========================================================================
     SHADOWS - Consistent elevation system
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* ==========================================================================
     SPACING SCALE - Responsive spacing
     ========================================================================== */
  --space-xs: clamp(4px, 0.4vw, 8px);
  --space-sm: clamp(8px, 0.8vw, 16px);
  --space-md: clamp(16px, 1.5vw, 32px);
  --space-lg: clamp(24px, 2.5vw, 48px);
  --space-xl: clamp(32px, 3.5vw, 64px);
  --space-2xl: clamp(48px, 5vw, 96px);
  --space-3xl: clamp(64px, 7vw, 128px);

  /* Section padding */
  --section-padding-y: clamp(40px, 5vw, 100px);
  --section-padding-x: clamp(20px, 3vw, 80px);

  /* ==========================================================================
     TRANSITIONS - Consistent animations
     ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ==========================================================================
     BORDER RADIUS - Consistent rounding
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ==========================================================================
     TYPOGRAPHY SCALE - Font sizes from 1280px to 5K
     These are the raw values; use typography.css classes for application
     ========================================================================== */

  /* Display - Hero headlines */
  --font-display-1: clamp(48px, 4vw, 120px);    /* Hero main: 48px→77px→120px */
  --font-display-2: clamp(40px, 3.2vw, 96px);   /* Hero sub: 40px→61px→96px */

  /* Headings */
  --font-h1: clamp(36px, 2.8vw, 80px);          /* Page titles: 36px→54px→80px */
  --font-h2: clamp(28px, 2.2vw, 64px);          /* Section titles: 28px→42px→64px */
  --font-h3: clamp(22px, 1.6vw, 48px);          /* Subsection: 22px→31px→48px */
  --font-h4: clamp(18px, 1.3vw, 36px);          /* Card titles: 18px→25px→36px */
  --font-h5: clamp(16px, 1.1vw, 32px);          /* Small titles: 16px→21px→32px */
  --font-h6: clamp(14px, 1vw, 28px);            /* Micro titles: 14px→19px→28px */

  /* Body text */
  --font-body-lg: clamp(18px, 1.3vw, 36px);     /* Lead paragraphs: 18px→25px→36px */
  --font-body: clamp(16px, 1.1vw, 32px);        /* Default body: 16px→21px→32px */
  --font-body-sm: clamp(14px, 1vw, 28px);       /* Secondary text: 14px→19px→28px */

  /* Small/utility text */
  --font-small: clamp(13px, 0.9vw, 24px);       /* Captions: 13px→17px→24px */
  --font-xs: clamp(11px, 0.8vw, 20px);          /* Labels: 11px→15px→20px */

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;

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

  /* ==========================================================================
     LAYOUT - Content widths
     ========================================================================== */
  --content-width: 90%;
  --content-max-width: none;
  --container-padding: clamp(20px, 3vw, 80px);

  /* ==========================================================================
     Z-INDEX SCALE - Layering system
     ========================================================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-header: 10000;
}

/* ==========================================================================
   MEDIA QUERY OVERRIDES - Fine-tune for specific breakpoints
   ========================================================================== */

/* Very Small Mobile (max-width: 375px) - iPhone SE, mini */
@media (max-width: 375px) {
  :root {
    /* Tighter spacing for tiny screens */
    --space-sm: clamp(6px, 1vw, 12px);
    --space-md: clamp(12px, 2vw, 24px);
    --space-lg: clamp(20px, 3vw, 36px);
    --space-xl: clamp(28px, 4vw, 48px);

    /* Reduced section padding */
    --section-padding-y: clamp(32px, 6vw, 60px);
    --section-padding-x: clamp(16px, 4vw, 40px);

    /* Container padding */
    --container-padding: clamp(16px, 4vw, 40px);
  }
}

/* 2K+ displays - slightly larger base */
@media (min-width: 2560px) {
  :root {
    --font-body: clamp(18px, 1.1vw, 32px);
    --font-body-sm: clamp(16px, 1vw, 28px);
    --font-small: clamp(14px, 0.9vw, 24px);
  }
}

/* 4K+ displays - ensure minimum readability */
@media (min-width: 3840px) {
  :root {
    --font-body: clamp(20px, 1.1vw, 32px);
    --font-body-sm: clamp(18px, 1vw, 28px);
    --font-small: clamp(16px, 0.9vw, 24px);
  }
}

/* 5K displays - optimal reading sizes */
@media (min-width: 5120px) {
  :root {
    --font-body: 32px;
    --font-body-sm: 28px;
    --font-small: 24px;
    --font-xs: 20px;
  }
}