/* ============================================================================
   CSS Variables - Theme Design Tokens
   ============================================================================ */

:root {
    /* Palette */
    --adst-primary: #2D2D2D; /* Ventum Air charcoal */
    --adst-primary-rgb: 45 45 45;
    --adst-primary-light: #3A3A3A;
    --adst-primary-dark: #353740;

    --adst-secondary: #2D2D2D; /* theme.json secondary */
    --adst-secondary-rgb: 45 45 45;
    --adst-secondary-light: #3A3A3A;

    --adst-background: #F5F5F5;
    --adst-light-bg: #F7F7F7;
    --adst-background-alt: #FFFFFF;
    --adst-background-rgb: 245 245 245;
    --adst-surface: #FFFFFF;
    --adst-surface-rgb: 255 255 255;

    --adst-text: #353740; /* theme.json dark-text */
    --adst-text-rgb: 53 55 64;
    --adst-muted: #565D6B; /* Muted text — darkened from prod #6B7280 to pass WCAG AA (4.5:1) on light section backgrounds (#F5F5F5/#F7F7F7). audit #38. */
    --adst-muted-rgb: 86 93 107;
    --adst-light: #DDDDDD;
    --adst-light-rgb: 221 221 221;

    --adst-accent: #FCD21D; /* Ventum Air yellow */
    --adst-accent-rgb: 252 210 29;
    --adst-accent-dark: #C9A817;
    --adst-highlight: #353740; /* Ventum Air ink-soft */
    --adst-highlight-rgb: 53 55 64;
    --adst-highlight-text: #FFFFFF;

    /* Layout */
    --adst-width-content: 1180px;      /* Default content width for most sections */
    --adst-width-full: 1920px;         /* Full-width sections (capped maximum) */
    --adst-max-width: var(--adst-width-content);  /* Alias for backward compatibility */
    --adst-container-inset: clamp(1.5rem, 4vw, 2rem);
    --adst-header-h-expanded: 84px; /* measured: prod desktop charcoal nav section (ticket #22 production measurements) */
    --adst-header-h-scrolled: 64px; /* Fixed bar deliberately does not scale with browser font size (#281). */
    --adst-header-logo-w: 64px; /* Equals the 64px bar height on purpose (ticket #22 production measurements). */
    --adst-header-inset: clamp(1.5rem, calc(6.9231vw - 39.692px), 60px); /* measured endpoints: 60px is Bartosz's accepted prod inset at 1440; 51px at W=1310 keeps the fixed 18px prod caret outside the unchanged plate by a device-pixel margin (ticket #29 breakpoint measurements). */
    --adst-desktop-nav-min: 1310px; /* measured at the 12px/1px floor: menu passes at 1310px and intersects the unchanged plate at the next 10px step, 1300px (ticket #29 breakpoint measurements). Prod wraps at 1280; Bartosz's no-overlap ruling overrides parity. */
    --adst-plate-text-offset: calc(68px + 92px); /* measured: fixed plate drops 68.72px below prod's header; 92px clearance is Bartosz's ruling (ticket #22 production measurements; ticket #29 contract). */
    --adst-home-content-x: clamp(171px, calc(7.5vw + 90px), 198px); /* measured: prod home content module x=198px/185.19px/170.8px at 1440/1280/1100 (ticket #29 production measurements). */
    --adst-nav-font-size: clamp(12px, calc(1.5385vw - 8.154px), 14px); /* measured: prod is 14px at 1440; reaches the coordinator's 12px readable floor at W=1310 (ticket #29 breakpoint measurements). */
    --adst-nav-tracking: 1px; /* measured: prod is 2px at 1440; coordinator floor is 1px, selected because 2px intersects the unchanged plate with the binding 60px inset (ticket #29 breakpoint receipt). */
    --adst-band-pattern: url("../assets/img/circle-background-pattern.png");

    /* Spacing Scale - Tailwind-inspired (4px base) */
    /* Base scale - Fixed values for consistent spacing */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* Semantic spacing - Named by context */
    --space-xs: var(--space-2);    /* 8px - Tight elements */
    --space-sm: var(--space-4);    /* 16px - Default spacing */
    --space-md: var(--space-6);    /* 24px - Comfortable spacing */
    --space-lg: var(--space-8);    /* 32px - Generous spacing */
    --space-xl: var(--space-12);   /* 48px - Section spacing */
    --space-2xl: var(--space-16);  /* 64px - Large sections */
    --space-3xl: var(--space-20);  /* 80px - Hero spacing */

    /* Context-specific spacing - Unified spacing system */
    --space-section: var(--space-12);           /* 48px - Section padding */
    --space-hero: var(--space-12);              /* 48px - Hero to content (user preference) */
    --space-between-blocks: var(--space-10);    /* 40px - Block spacing */

    /* Legacy variables (deprecated - kept for backwards compatibility) */
    --adst-section-padding: var(--space-20);          /* 80px - Use --space-section instead */
    --adst-section-padding-tight: var(--space-16);    /* 64px - Use --space-2xl instead */
    --adst-gap-sm: var(--space-md);                   /* 24px - Use --space-md instead */
    --adst-gap-md: var(--space-lg);                   /* 32px - Use --space-lg instead */
    --adst-gap-lg: var(--space-xl);                   /* 48px - Use --space-xl instead */

    /* Radius & Shadow */
    --adst-radius-sm: 0;
    --adst-radius: 0;
    --adst-radius-lg: 0;
    --adst-radius-pill: 100px; /* Prod CTA pill: ticket #33 production measurements. */
    --adst-border: 1px solid rgb(var(--adst-light-rgb) / 0.6);
    --adst-soft-border: 1px solid rgb(var(--adst-secondary-rgb) / 0.1);
    --adst-shadow-xs: 0 3px 18px rgba(0, 0, 0, 0.07);
    --adst-shadow-sm: 0 6px 30px rgba(0, 0, 0, 0.08);
    --adst-shadow-md: 4px 4px 40px rgba(0, 0, 0, 0.1);
    --adst-shadow-lg: 0 10px 60px rgba(0, 0, 0, 0.12);
    --adst-shadow-hover: 6px 6px 30px rgba(0, 0, 0, 0.08);

    /* Typography */
    --adst-font-family: var(--wp--preset--font-family--open-sans, "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);
    --adst-font-heading: var(--wp--preset--font-family--montserrat, "Montserrat", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);
    --adst-font-nav: var(--wp--preset--font-family--montserrat, "Montserrat", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);
    --adst-text-xs: var(--wp--preset--font-size--x-small);
    --adst-text-sm: var(--wp--preset--font-size--small);
    --adst-text-base: var(--wp--preset--font-size--medium);
    --adst-text-lg: var(--wp--preset--font-size--large);
    --adst-text-xl: var(--wp--preset--font-size--lead);
    --adst-text-2xl: var(--wp--preset--font-size--heading-small);
    --adst-text-3xl: var(--wp--preset--font-size--heading-large);
    --adst-text-4xl: var(--wp--preset--font-size--xx-large);
    --adst-text-5xl: var(--wp--preset--font-size--xx-large);

    --adst-font-regular: 400;
    --adst-font-semibold: 600;
    --adst-font-bold: 700;
    --adst-font-black: 800;

    --adst-transition-fast: 140ms ease;
    --adst-transition: 220ms ease;

    /* Stacking order */
    --adst-z-behind: -1;
    --adst-z-base: 0;
    --adst-z-content: 10;
    --adst-z-header-bar: 20;
    --adst-z-brand: 30;
    --adst-z-control: 40;
    --adst-z-dropdown: 50;
    --adst-z-fixed-header: 60;
    --adst-z-overlay: 70;

    /* Responsive Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;
}

/* Responsive Section Padding (match template) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --adst-section-padding: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --adst-section-padding: 80px;
    }
}