/**
 * WEX Block Theme - Foundational Variables & Utilities
 * 
 * This file contains responsive sizing, spacing, and typography utilities
 * that support all custom blocks and layouts in the parent theme.
 * 
 * Child themes can override these variables for brand-specific adjustments.
 */

/* https://utopia.fyi/clamp/calculator?a=560,1200,14%E2%80%9420|16%E2%80%9450|24%E2%80%9450|32%E2%80%9450|24%E2%80%9430|16%E2%80%9418 */
:root {
    /* Typography */
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-body: 'Inter', sans-serif;

    /* Responsive padding/margins for page sections */
    --vw-360-1450-20-30: clamp(1.25rem, 1.0436rem + 0.9174vw, 1.875rem); /* Padding between footer sections */
    --vw-360-1450-30-60: clamp(1.875rem, 1.2557rem + 2.7523vw, 3.75rem); /* Top/bottom page-section padding for half-height*/
    --vw-360-1450-32-96: clamp(2rem, 0.6789rem + 5.8716vw, 6rem); /* Top/bottom page-section padding for pre-footer*/
    --vw-360-1450-60-120: clamp(3.75rem, 2.5115rem + 5.5046vw, 7.5rem); /* Top/bottom page-section padding */

    /* Responsive sizing for content within cards and options */
    --vw-560-950-16-18: clamp(1rem, 0.8205rem + 0.5128vw, 1.125rem); /* For the Fuel Card Options list items and paragraph text */
    --vw-560-950-20-24: clamp(1.25rem, 0.891rem + 1.0256vw, 1.5rem); /* For the Fuel Card Options space above and below the list. */
    --vw-560-950-18-26: clamp(1.125rem, 0.4071rem + 2.0513vw, 1.625rem);
    --vw-560-950-20-26: clamp(1.25rem, 0.7115rem + 1.5385vw, 1.625rem);
    --vw-560-950-18-28: clamp(1.125rem, 0.2276rem + 2.5641vw, 1.75rem);
    --vw-560-950-24-32: clamp(1.5rem, 0.7821rem + 2.0513vw, 2rem);
    --vw-560-950-20-40: clamp(1.25rem, -0.5449rem + 5.1282vw, 2.5rem);
    --vw-560-950-13-15: clamp(0.8125rem, 0.633rem + 0.5128vw, 0.9375rem); /* Footer menu items */
    
    /* Responsive spacing between components */
    --vw-560-1200-14-20: clamp(0.875rem, 0.5469rem + 0.9375vw, 1.25rem); /* Gap between buttons. Based on viewport as we always want button spacing to be consistent across all components down the page. */
    --vw-560-1200-28-40: clamp(1.75rem, 1.0938rem + 1.875vw, 2.5rem);
    --vw-560-1200-28-95: clamp(1.75rem, -1.9141rem + 10.4688vw, 5.9375rem);
    --vw-560-1200-16-50: clamp(1rem, -0.8594rem + 5.3125vw, 3.125rem); /* A common spacing value used for block padding and gaps that we want to scale up more aggressively as the viewport gets larger. The default spacing between columns of content. */
    --vw-560-1200-16-60: clamp(1rem, -1.4062rem + 6.875vw, 3.75rem);
    --vw-560-1200-35-180: clamp(2.1875rem, -5.7422rem + 22.6563vw, 11.25rem);
    --vw-560-1200-40-80: clamp(2.5rem, 0.3125rem + 6.25vw, 5rem);
    --vw-560-1200-20-50: clamp(1.25rem, -0.3906rem + 4.6875vw, 3.125rem); /* Inline Padding on Promo. */
    --vw-560-1200-35-65: clamp(2.1875rem, 0.5469rem + 4.6875vw, 4.0625rem); /* Border Radius on Promo. */

    /* Section Header Sizing */
    --vw-560-1200-38-68: clamp(2.375rem, 0.7344rem + 4.6875vw, 4.25rem); /* Homepage Hero H1 */
    --vw-560-1200-36-48: clamp(2.25rem, 1.5938rem + 1.875vw, 3rem); /* Section Heading. Based on viewport as it's never in a column. */
    --vw-560-100-8-10: clamp(0.5rem, 0.3906rem + 0.3125vw, 0.625rem); /* Space between Section Heading and Eyebrow. */
    --vw-560-1200-18-22: clamp(1.125rem, 0.9063rem + 0.625vw, 1.375rem); /* Section Description. Based on viewport as it's never in a column. */
    --vw-560-1200-4-5: clamp(0.25rem, 0.1953rem + 0.1563vw, 0.3125rem); /* Gap between Section Description and Section Heading. */
    --vw-560-1200-40-60: clamp(2.5rem, 1.4063rem + 3.125vw, 3.75rem); /* Gap between section header and content. */
    --vw-560-1200-35-94: clamp(2.1875rem, -1.0391rem + 9.2188vw, 5.875rem);

    /* Card Options */
    --cq-300-400-18-32: clamp(1.125rem, -1.5rem + 14cqi, 2rem); /* Card Options Title. */

    /* Container Query Spacing */
    --cq-300-415-20-30: clamp(1.25rem, -0.3804rem + 8.6957cqi, 1.875rem);
    --cq-300-1000-5-6: clamp(0.3125rem, 0.2857rem + 0.1429cqi, 0.375rem); /* Gap between heading/subheading and paragraph text in components */
    --cq-300-1000-20-30: clamp(1.25rem, 0.9821rem + 1.4286cqi, 1.875rem); /* Space above buttons in components */
    --cq-300-1000-16-20: clamp(1rem, 0.8929rem + 0.5714cqi, 1.25rem); /* Space above buttons in Collections */

    /* Container Query Font Sizes */
    --cq-300-1000-18-32: clamp(1.125rem, 0.75rem + 2cqi, 2rem); /* Heading size for components. */
    --cq-300-1000-13-15: clamp(0.8125rem, 0.7589rem + 0.2857cqi, 0.9375rem); /* Paragraph size for quote inside column. */
    --cq-300-1000-14-16: clamp(0.875rem, 0.8214rem + 0.2857cqi, 1rem); /* Paragraph size for components. */

    --cq-650-1000-20-30: clamp(1.25rem, 0.0893rem + 2.8571cqi, 1.875rem); /* Space between image/icon and heading. Fixed at 20px for almost all occasions, but scales up to 30px when a "single item collection" is larger than 650px. */
    --cq-300-1000-25-75: clamp(1.5625rem, 0.2232rem + 7.1429cqi, 4.6875rem);
    --cq-300-1000-12-18: clamp(0.75rem, 0.5893rem + 0.8571vw, 1.125rem);
    --cq-300-1000-30-60: clamp(1.875rem, 1.0714rem + 4.2857vw, 3.75rem);

    /* Viewport-based sizing */
    --vw-560-1200-28-18: clamp(1.125rem, 2.2969rem + -1.5625vw, 1.75rem);
    --vw-560-1200-28-58: clamp(1.75rem, 0.1094rem + 4.6875vw, 3.625rem);
    --vw-560-1200-32-58: clamp(2rem, 0.5781rem + 4.0625vw, 3.625rem);
    --cq-650-1350-32-58: clamp(2rem, 0.4911rem + 3.7143cqi, 3.625rem);
    --cq-650-1350-18-22: clamp(1.125rem, 0.8929rem + 0.5714cqi, 1.375rem);
    --cq-700-1350-50-100: clamp(3.125rem, -0.2404rem + 7.6923cqi, 6.25rem);
    --cq-650-1350-38-68: clamp(2.375rem, 0.6339rem + 4.2857cqi, 4.25rem); /* For the Hero Heading on the homepage, we want it to scale more aggressively between 650 and 1350px where the layout changes from single column to two columns. */

    /* Semantic color variables - Child themes should override these */
    --color-text-primary: #000;
    --color-text-secondary: #666;
    --color-text-tertiary: #999;
    --color-text-muted: #ccc;
    --color-accent: #e74c3c;
    --color-primary: #1b6dfe;
    --color-background-light: #f5f5f5;
    --color-background-extra-light: #f9f9f9;

    /* Block-specific variables - Generic names for reusability */
    --app-rating--ratings-text-font-weight: 400;
    --app-rating--color: var(--color-text-primary);
    --app-rating--count--color: var(--color-text-primary);
    --app-rating--font-size: 0.875rem;
    --app-rating--font-family: 'Inter', sans-serif;

    /* Reading progress defaults (override in child theme as needed) */
    --wex-reading-progress-height: 3px;
    --wex-reading-progress-z-index: 999;
    --wex-reading-progress-color: #00cfff;
    --wex-reading-progress-dark-color: #ffcc00;
    --wex-reading-progress-track-color: transparent;
}

body {
    font-family: var(--font-family-body);
}

/* Link Colors */
p a {
    color: var(--color-primary);
}

/* General HTML/Body Utilities */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}