/* ============================================================================
   DESIGN SYSTEM VARIABLES
   Central repository for all colors, typography, and sizing
   ============================================================================ */

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

  /* Brand Colors */
  --color-primary: #f60;
  --color-primary-rgb: 255, 102, 0;
  --color-secondary: #6c757d;
  --color-tertiary: #1f1f1f;

  /* Background Colors */
  --color-background-primary: #fff;
  --color-background-secondary: #f8f8f8;
  --color-background-tertiary: #eee;
  --color-background-alert: #ffee91;

  /* Button & Interactive Colors */
  --color-button-primary: #4E9CAF;
  --color-button-text: #fff;
  --color-button-success: #FDAE6B;
  --color-button-danger: #505050;

  /* Text & Content Colors */
  --color-text-primary: #000;
  --color-text-secondary: #1f1f1f;
  --color-text-error: red;

  /* Border & Shadow Colors */
  --color-border-default: #ddd;
  --color-shadow: grey;
  --color-field-mandatory: rgba(255, 156, 153, 0.1);

  /* Notification badge (shopping cart counter, etc.) */
  --color-notification-badge: #e53935;
  --color-notification-badge-text: #fff;
  --color-notification-badge-ring: #fff;

  /* ========================================================================
     TYPOGRAPHY - FONT SIZES (Mobile First)
     ======================================================================== */

  /* Base HTML font size - scales with viewport */
  --font-size-html: 14px;

  /* Responsive typography scale - Mobile baseline */
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.375rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;

  --font-size-large: 1.125rem;
  --font-size-default: 0.95rem;
  --font-size-small: 0.85rem;
  --font-size-xs: 0.75rem;

  /* Navigation and UI elements */
  --font-size-nav-link: 0.95rem;
  --font-weight-nav-link: 600;
  --font-size-btn: 0.95rem;
  --font-size-label: 0.9rem;

  /* Shopping cart specific */
  --font-size-shopping-cart-icon: 18px;
  --font-size-shopping-cart-icon-mobile: 14px;
  --font-size-shopping-cart-items: 12px;
  --font-size-shopping-cart-label: 13px;
  --font-size-shopping-cart-button-mobile: 12px;

  /* ========================================================================
     SPACING - MARGINS & PADDING (Mobile First)
     ======================================================================== */

  /* Small spaces */
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 20px;
  --space-3xl: 24px;

  /* ========================================================================
     SIZING - WIDTHS & HEIGHTS
     ======================================================================== */

  /* Button sizes */
  --button-height: 50px;
  --button-width: 115px;
  --button-padding: 15px;
  --button-border-radius: 5px;

  /* Shopping cart button */
  --shopping-cart-button-width: 170px;
  --shopping-cart-button-height: 40px;
  --shopping-cart-button-width-mobile: 120px;
  --shopping-cart-button-height-mobile: 36px;
  --shopping-cart-button-padding: 10px;

  /* Arrow buttons */
  --arrow-button-size: 5rem;

  /* Shopping cart items indicator (notification badge) */
  --shopping-cart-items-size: 20px;
  --shopping-cart-items-padding-x: 6px;
  --shopping-cart-items-border-radius: 999px;
  --shopping-cart-items-ring-width: 2px;

  /* Language selector */
  --language-selector-width: 100px;

  /* Select/input sizing */
  --selectize-language-height: 100px;
  --selectize-language-width: 500px;
  --selectize-language-height-mobile: 80px;
  --contact-message-height: 300px;

  /* Card sizing */
  --card-section-width: 280px;
  --card-section-height: 90px;

  /* Shopping cart container */
  --shopping-cart-flex-basis: 400px;
  --shopping-cart-flex-basis-mobile: 120px;
  --shopping-cart-min-flex: 3 0 400px;
  --shopping-cart-sidebar-flex: 1 0 200px;
  --shopping-cart-min-width: 80px;

  /* Right tabs */
  --right-tabs-width: 25vw;
  --right-tabs-min-width: 120px;
  --right-tabs-min-width-mobile: 80px;
  --right-tabs-child-flex: 1 1 0;
  --right-tabs-child-flex-wrap: 1 1 100%;

  /* PDF embed sizing */
  --pdf-embed-width: 80%;
  --pdf-icon-size: 20px;

  /* Button and card margins */
  --button-margin-left: 50px;
  --button-min-width: 40px;
  --button-min-width-default: 100px;
  --shopping-cart-button-width-small: 140px;

  /* Focus ring and outline */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --border-accent-width: 4px;

  /* Mapbox positioning */
  --mapbox-ctrl-geocoder-top: 20px;
  --mapbox-ctrl-geocoder-min-width: 120px;

  /* Miscellaneous margins */
  --shopping-cart-icon-margin-left: 12px;

  /* ========================================================================
     POSITIONING & LAYOUT (Mobile First)
     ======================================================================== */

  /* Button positioning offsets */
  --position-button-top-offset: 8rem;
  --position-button-mobile-offset: 2rem;
  --position-button-left-offset-mobile: 35%;
  --position-button-right-offset-mobile: 65%;
  --position-button-left-offset-desktop: -5%;
  --position-button-right-offset-desktop: -5%;
  --position-button-left-offset-center: 45%;
  --position-button-right-offset-center: 55%;

  /* Positioning percentages */
  --position-top-center: 50%;
  --position-top-small: 1%;
  --position-right-small: 5%;
  --position-top-zero: 0%;
  --position-left-zero: 0%;

  /* App page margins - minimal on mobile, larger on desktop */
  --app-page-margin-vertical: 0.5rem;
  --app-page-margin-horizontal: 0.5rem;
  --app-page-max-width: 100%;
  --app-page-max-width-large: calc(100% - 10rem);
  --app-page-shadow-offset: 5px;

  /* Navbar sizing */
  --navbar-height-mobile: 60px;
  --navbar-max-height-mobile: 60px;

  /* Top navigation */
  --top-nav-height: 75px;
  --top-nav-max-height: 66px;

  /* Navbar */
  --navbar-sticky-top: 66px;
  --navbar-height: 3em;
  --navbar-min-height: 50px;
  --navbar-link-padding-vertical: 10px;
  --navbar-link-line-height: 20px;
  --navbar-active-border-width: 2px;

  /* PDF view */
  --pdfview-height: 1000px;
  --pdfview-width: 80%;
  --pdfview-mobile-height: 50vh;
  --pdfview-mobile-width: 100%;

  /* Media nav mobile */
  --mobile-nav-margin-bottom: 100px;

  /* Accordion sizing */
  --accordion-body-padding: 2em;
  --accordion-button-padding: 1em;

  /* Legal text */
  --legal-text-padding: 10px 16px;
  --legal-text-border-left: 4px;
  --legal-text-border-radius: 0 6px 6px 0;

  /* Price tag */
  --price-tag-padding: 12px 20px;
  --price-tag-border-radius: 10px;

  /* Form section header */
  --form-section-header-border-bottom: 1px;
  --form-section-header-padding-bottom: 4px;
  --form-section-header-margin-top: 1.4em;
  --form-section-header-margin-bottom: 0.6em;
  --form-section-header-letter-spacing: 0.06em;

  /* Field error margin */
  --field-error-margin-top: -6px;
  --field-error-margin-bottom: 6px;

  /* ========================================================================
     SHADOWS & EFFECTS
     ======================================================================== */

  --shadow-default: 5px 5px 5px 5px;
  --shadow-box: 0 2px 5px;

  /* ========================================================================
     MEDIA QUERY BREAKPOINTS (Mobile First)
     ======================================================================== */

  --breakpoint-mobile: 320px;
  --breakpoint-mobile-lg: 480px;
  --breakpoint-extra-small: 369px;
  --breakpoint-tablet: 768px;
  --breakpoint-tablet-lg: 1024px;
  --breakpoint-desktop: 1200px;
  --breakpoint-large: 1400px;
  --breakpoint-xlarge: 1920px;

  /* Media query values (hardcoded - CSS variables don't work in @media expressions) */
  --media-mobile-max: 480px;
  --media-tablet-max: 767px;
  --media-tablet-min: 768px;
  --media-tablet-above: 769px;
  --media-desktop-min: 1200px;
  --media-large-min: 1400px;
  --media-xlarge-min: 1920px;

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */

  --border-radius-none: 0;
  --border-radius-xs: 4px;
  --border-radius-sm: 5px;
  --border-radius-md: 6px;
  --border-radius-base: 8px;
  --border-radius-lg: 10px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  --border-radius-round: 50%;
  --border-radius-pill: 999px;

  /* ========================================================================
     Z-INDEX
     ======================================================================== */

  --z-index-language-selector: 1500;
  --z-index-app-page: 1;
  --z-index-top-nav: 9999;

  /* ========================================================================
     FLEX & GRID PROPERTIES
     ======================================================================== */

  --flex-button-arrow: 1;
  --flex-shopping-cart: 3 0 400px;
  --flex-shopping-cart-sidebar: 1 0 200px;

  /* ========================================================================
     LINE HEIGHT
     ======================================================================== */

  --line-height-default: 1.2;
  --line-height-nav-item: unset;
  --line-height-button: 25px;
  --line-height-button-mobile: 20px;
  --line-height-shopping-cart-label: 45px;
  --line-height-shopping-cart-items: 1.4;
  --line-height-shopping-cart-icon: 0.8;
  --line-height-form-section: 1.1;

  /* ========================================================================
     FOCUS RING
     ======================================================================== */

  --focus-ring-width: 0.25rem;
  --focus-ring-color: rgba(255, 102, 0, 0.15);

  /* ========================================================================
     LETTER SPACING
     ======================================================================== */

  --letter-spacing-default: 0;
  --letter-spacing-form-header: 0.06em;

  /* ========================================================================
     GAP & SPACING FOR FLEX
     ========================================================================== */

  --gap-small: 5px;
  --padding-product-tabs-nav: 4px;

  /* ========================================================================
     PERCENTAGE-BASED WIDTHS & POSITIONS
     ========================================================================== */

  --width-full: 100%;
  --width-three-quarters: 75%;
  --width-half: 50%;
  --width-viewport-half: 50vw;

  --position-full: 100%;
  --position-half: 50%;
  --position-center-horizontal: 50%;
  --position-center-vertical: 50%;

  /* ========================================================================
     EM/REM-BASED SPACING (For accordion, modal, and other components)
     ========================================================================== */

  --padding-accordion: 1em;
  --padding-accordion-expanded: 2em;
  --margin-accordion: 1em;
  --margin-modal-vertical: 1em;
  --height-viewport-full: 100vh;
  --height-modal-percentage: 75%;

  /* ========================================================================
     SPECIFIC MEASUREMENTS
     ========================================================================== */

  --width-input-district-select: 50vw;
  --position-modal-left: 50%;
  --position-modal-top: 50%;
  --alert-cancel-right: 2%;
  --alert-cancel-top: 2%;
  --sweet-alert-height: 75%;
  --pdf-view-position-left: 20%;
  --pdf-view-position-top: 20%;
  --shopping-cart-items-position-top: -6px;
  --shopping-cart-items-position-right: -6px;
}

/* ============================================================================
   TABLET & LARGER SCREENS - RESPONSIVE OVERRIDES
   ============================================================================ */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  :root {
    /* Increase font sizes on tablet */
    --font-size-html: 15px;

    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.375rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.125rem;
    --font-size-h6: 1rem;

    --font-size-large: 1.25rem;
    --font-size-default: 1.05rem;
    --font-size-small: 0.95rem;
    --font-size-xs: 0.85rem;

    --font-size-nav-link: 1.05rem;
    --font-size-btn: 1.05rem;
    --font-size-label: 1rem;

    --font-size-shopping-cart-icon: 20px;
    --font-size-shopping-cart-label: 14px;

    /* Increase spacing on tablet */
    --space-xs: 3px;
    --space-sm: 5px;
    --space-md: 10px;
    --space-lg: 12px;
    --space-xl: 15px;
    --space-2xl: 20px;
    --space-3xl: 27px;

  }
}

/* Desktop (1200px and up) */
@media (min-width: 1200px) {
  :root {
    /* Desktop font sizes */
    --font-size-html: 16px;

    --font-size-h1: 2.25rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;

    --font-size-large: 1.5rem;
    --font-size-default: 1.15rem;
    --font-size-small: 1rem;
    --font-size-xs: 0.875rem;

    --font-size-nav-link: 1.15rem;
    --font-size-btn: 1.15rem;
    --font-size-label: 1rem;

    --font-size-shopping-cart-icon: 24px;
    --font-size-shopping-cart-label: 15px;

    /* Desktop spacing */
    --space-xs: 4px;
    --space-sm: 5px;
    --space-md: 10px;
    --space-lg: 12px;
    --space-xl: 15px;
    --space-2xl: 20px;
    --space-3xl: 27px;

    /* Larger buttons on desktop */
    --arrow-button-size: 5rem;
  }
}