/* Podium Chasers storefront design tokens. Change shared values here. */
@layer pc-tokens, pc-base, pc-components, pc-utilities;

@layer pc-tokens {
  :root {
    --pc-font-sans: "Helvetica Now", Helvetica, Arial, sans-serif;
    --pc-weight-regular: 400;
    --pc-weight-bold: 700;
    --pc-text-xs: 0.6875rem;
    --pc-text-sm: 0.8125rem;
    --pc-text-base: 0.9375rem;
    --pc-text-md: 1rem;
    --pc-text-lg: 1.125rem;
    --pc-text-xl: 1.375rem;
    --pc-heading-section: clamp(1.4375rem, 2.55vw, 1.625rem);
    --pc-heading-card: clamp(1.4375rem, 2.9vw, 1.875rem);
    --pc-heading-display: clamp(2.625rem, 5.3vw, 3.375rem);
    --pc-heading-hero: clamp(1.75rem, 3.4vw, 2.5rem);
    --pc-leading-body: 1.5;
    --pc-leading-compact: 1.3;
    --pc-leading-heading: 1.08;
    --pc-leading-display: 1.02;
    --pc-tracking-heading: -0.035em;
    --pc-tracking-display: -0.055em;
    --pc-tracking-label: 0.12em;

    --pc-color-page: #ffffff;
    --pc-color-surface: #ffffff;
    --pc-color-soft: #f5f7f7;
    --pc-color-search-surface: #f5f7f7;
    --pc-color-search-border: #e2e6e6;
    --pc-color-hover: #edf0f0;
    /* Owner decision #11 (2026-11-10, HRD cohesion): HRD navy replaces black everywhere (text and dark surfaces). */
    --pc-color-ink: #04011D; /* 20.4:1 with white */
    --pc-color-band: #100E28; /* HRD ink-band: the announcement bar only. 18.8:1 with white. */
    /* HRD sky: ONLY on navy/band surfaces (hero eyebrow, footer link hover, focus ring on dark). Never text, links,
       buttons, borders or focus on white (1.6:1 fails WCAG), never in fitment or stock states. 12.5:1 on navy. */
    --pc-color-sky: #91D2FF;
    --pc-color-muted: #606668;
    --pc-color-subtle: #6a7072; /* was #707779: 4.24:1 on #f5f7f7 failed AA for the search placeholder (design-system.md R1). */
    --pc-color-line: #e2e6e6;
    --pc-color-line-strong: #b5bcbc;
    --pc-color-inverse: #ffffff;
    --pc-color-inverse-muted: #b9bebe;
    --pc-color-inverse-line: #494d4d;
    --pc-color-disabled: #dee3e3;
    --pc-color-disabled-dark: #3e4242;
    --pc-color-focus: #606668;
    --pc-color-focus-inverse: var(--pc-color-sky); /* focus ring on dark surfaces: the gray ring is 3.5:1 on navy, too faint */
    /* --pc-color-brand-accent (red) retired by owner decision #11. */
    --pc-color-field-border: #8a9191; /* 3.2:1 boundary for form fields (WCAG 1.4.11). */
    --pc-color-error: #a3170f; /* Field/notice errors only; not a brand colour. 6.9:1 on white. */
    --pc-color-error-surface: #fff4f2;
    --pc-color-backdrop: rgb(4 1 29 / 32%); /* navy scrim */

    --pc-space-0: 0;
    --pc-space-1: 0.25rem;
    --pc-space-2: 0.5rem;
    --pc-space-3: 0.75rem;
    --pc-space-4: 1rem;
    --pc-space-5: 1.25rem;
    --pc-space-6: 1.5rem;
    --pc-space-7: 1.75rem;
    --pc-space-8: 2rem;
    --pc-space-9: 2.25rem;
    --pc-space-10: 2.5rem;
    --pc-space-12: 3rem;
    --pc-space-14: 3.5rem;
    --pc-space-16: 4rem;
    --pc-page-gutter: clamp(1rem, 3.5vw, 2.25rem);
    --pc-content-width: 90rem;
    --pc-header-logo-width: 10rem;
    --pc-header-logo-width-mobile: 9rem;
    --pc-header-icon-width: 2.5rem;
    --pc-header-padding-block: var(--pc-space-2);
    --pc-header-compact-padding-block: 0.375rem;
    --pc-header-compact-logo-width: 2.9946rem;
    --pc-header-compact-logo-slot: 4rem;
    --pc-header-compact-search-height: 2.5rem;
    --pc-header-sticky-offset: 0px;
    --pc-search-thumbnail-size: 3.5rem;
    --pc-search-thumbnail-size-mobile: 3rem;
    --pc-garage-dropdown-width: 22rem;
    --pc-garage-radius: 1.125rem;
    --pc-garage-row-radius: 0.6875rem;
    --pc-garage-sheet-radius: 1.375rem;
    --pc-garage-option-height: 3.5rem;
    --pc-hero-finder-width: 62.5rem;
    --pc-finder-action-min-width: 9rem;
    --pc-hero-overlap: 2.5rem;
    --pc-hero-overlap-mobile: 1.5rem;
    --pc-hero-copy-height: 8.5rem;
    --pc-hero-photo-gap: 15.5rem; /* owner #25: room for the car between the heading and the finder */
    --pc-hero-photo-gap-tablet: 13rem;
    --pc-hero-photo-gap-mobile: 9rem; /* owner: finder a little higher on phones */
    --pc-hero-photo-max: var(--pc-content-width); /* owner decision G: the hero photo is locked to the content frame; beyond it the edges fade into navy */
    --pc-hero-photo-max-mobile: 34rem; /* same for the 3:2 shot on large phones */
    --pc-product-media-ratio: 4 / 3;
    --pc-product-grid-gap: var(--pc-space-6);
    --pc-product-grid-gap-mobile: var(--pc-space-3);
    --pc-product-title-size: var(--pc-text-base);
    --pc-product-price-size: var(--pc-text-lg);
    --pc-product-media-surface: #f5f7f7;
    --pc-product-rail-columns: 4;
    --pc-product-rail-columns-tablet: 2.25;
    --pc-product-rail-columns-mobile: 1.35;
    --pc-product-rail-control-size: var(--pc-control-height);
    --pc-rail-end-card-min-height: 17rem;
    --pc-pdp-gallery-ratio: 5 / 4;
    --pc-pdp-buy-min-width: 21rem;
    --pc-pdp-column-gap: var(--pc-space-8);
    --pc-pdp-title-size: clamp(1.5rem, 2.6vw, 2rem);
    --pc-pdp-price-size: clamp(1.875rem, 3.2vw, 2.5rem);
    --pc-pdp-section-gap: var(--pc-space-14);
    --pc-pdp-fitment-radius: var(--pc-radius-md);
    --pc-pdp-button-height: 3.25rem;
    --pc-pdp-description-width: 48rem;
    --pc-review-score-size: clamp(3.5rem, 6vw, 4.5rem);
    --pc-review-heading-size: clamp(1.75rem, 2.8vw, 2.5rem);
    --pc-review-author-width: 13rem;
    --pc-review-column-gap: var(--pc-space-12);
    --pc-review-photo-size: 7.5rem;
    --pc-review-title-size: var(--pc-text-xl);
    --pc-review-body-size: var(--pc-text-md);
    --pc-review-row-padding: var(--pc-space-10);
    --pc-collection-sidebar-width: 14rem;
    --pc-collection-columns: 5;
    --pc-collection-card-min-width: 13.5rem; /* 3 columns at 1024, 4 at 1440, 5 at 1920 (approved density, design-foundation.md) */
    --pc-collection-column-gap: var(--pc-space-8);
    --pc-collection-grid-gap: var(--pc-space-5);
    --pc-collection-row-gap: var(--pc-space-10);
    --pc-collection-title-size: clamp(2rem, 4vw, 3rem);
    --pc-collection-card-title: var(--pc-text-lg);
    --pc-collection-media-ratio: 4 / 5;
    --pc-collection-filter-size: var(--pc-text-sm);
    --pc-collection-filter-row-height: 2.375rem;
    --pc-collection-section-gap: var(--pc-space-12);
    --pc-checkout-width: 77.5rem;
    --pc-checkout-summary-width: 26.25rem;
    --pc-checkout-column-gap: var(--pc-space-12);
    --pc-checkout-header-height: 4.5rem;
    --pc-checkout-logo-width: 9.5rem;
    --pc-checkout-title-size: clamp(1.625rem, 3vw, 2rem);
    --pc-checkout-section-title: var(--pc-text-xl);
    --pc-checkout-section-gap: var(--pc-space-9);
    --pc-checkout-field-height: 3.25rem;
    --pc-checkout-field-gap: var(--pc-space-4);
    --pc-checkout-image-size: 3.75rem;
    --pc-checkout-total-size: 1.75rem;
    --pc-checkout-submit-height: 3.5rem;
    --pc-confirm-width: var(--pc-checkout-width);
    --pc-confirm-summary-width: 24rem;
    --pc-confirm-column-gap: var(--pc-space-12);
    --pc-confirm-heading-size: clamp(3.25rem, 7vw, 5.5rem);
    --pc-confirm-band-padding: var(--pc-space-10);
    --pc-confirm-section-gap: var(--pc-space-8);
    --pc-confirm-image-size: var(--pc-cart-image-size);
    --pc-confirm-panel-padding: var(--pc-space-6);
    --pc-cart-title-size: clamp(2rem, 4vw, 3rem);
    --pc-cart-vehicle-size: clamp(1.25rem, 2vw, 1.625rem);
    --pc-cart-item-title: var(--pc-text-lg);
    --pc-cart-summary-width: 22.5rem;
    --pc-cart-column-gap: var(--pc-space-10);
    --pc-cart-image-size: 4.5rem;
    --pc-cart-drawer-width: 30rem;
    --pc-cart-drawer-max-height: 100dvh; /* Pass 4 (P2 #14): no fixed 768px cap; short carts stay content-height, long ones use the screen like HRD's side sheet */
    --pc-cart-drawer-image-size: 3.5rem;
    --pc-cart-checkout-height: 3.25rem;
    --pc-cart-meter-height: 0.25rem;
    --pc-cart-row-padding-block: var(--pc-space-4);
    --pc-cart-row-padding-inline: var(--pc-space-5);
    --pc-cart-row-gap: var(--pc-space-4);
    --pc-cart-meta-padding-block: var(--pc-space-1);
    --pc-cart-actions-gap: var(--pc-space-3);
    --pc-cart-sheet-padding-block: var(--pc-space-4);
    --pc-part-grid-columns: 4;
    --pc-part-media-ratio: 1.8 / 1;
    --pc-part-media-min-height: 7.5rem;
    --pc-part-media-min-height-mobile: 6.5rem;
    --pc-part-grid-gap: var(--pc-space-6);
    --pc-part-label-size: var(--pc-text-md);
    --pc-part-compact-image-size: 5.5rem;
    --pc-brand-grid-columns: 4;
    --pc-brand-cell-height: 7.5rem;
    --pc-brand-cell-height-mobile: 5.5rem;
    --pc-brand-logo-width: 10.5rem;
    --pc-brand-logo-height: 3.25rem;
    --pc-brand-grid-gap: var(--pc-space-3);
    --pc-brand-tile-surface: var(--pc-color-surface);
    --pc-brand-tile-border: var(--pc-color-search-border);
    --pc-brand-muted-opacity: 0.5;
    --pc-feature-min-height: 22rem;
    --pc-feature-copy-padding: clamp(1.5rem, 4vw, 3rem);
    --pc-feature-heading-size: clamp(1.875rem, 3.4vw, 2.75rem);
    --pc-feature-logo-width: 4rem;
    --pc-feature-image-ratio-mobile: 16 / 10;
    --pc-footer-padding-block: var(--pc-space-10);
    --pc-footer-column-gap: var(--pc-space-8);
    --pc-footer-logo-width: 12rem;
    --pc-footer-link-size: var(--pc-text-sm);
    --pc-footer-dialog-width: 32rem;
    --pc-chat-sidebar-width: 16.5rem;
    --pc-chat-content-width: 46.5rem;
    --pc-chat-min-height: 43rem;
    --pc-chat-composer-radius: 1.5rem;
    --pc-chat-bubble-radius: 1.25rem;
    --pc-chat-sidebar-surface: var(--pc-color-search-surface);
    --pc-chat-heading-size: 2.125rem;
    --pc-chat-topbar-height: 3.5rem;
    --pc-chat-nav-height: 2.375rem;
    --pc-chat-tool-height: 2.25rem;
    --pc-chat-order-image-width: 8.75rem;
    --pc-account-content-width: 53.75rem;
    --pc-account-summary-width: 16.875rem;
    --pc-account-part-image-height: 10.625rem;
    --pc-account-part-title-size: 1.1875rem;
    --pc-account-part-label-width: 4.75rem;
    --pc-account-part-card-radius: 1rem;
    --pc-account-panel-radius: 1rem;
    --pc-account-field-radius: 0.625rem;
    --pc-account-form-gap: 0.625rem;
    --pc-section-gap: var(--pc-space-12);

    --pc-radius-none: 0;
    --pc-radius-sm: 0.25rem;
    --pc-radius-md: 0.5rem;
    --pc-radius-pill: 999px;
    --pc-border-width: 1px;
    --pc-focus-width: 2px;
    --pc-focus-offset: 3px;
    --pc-shadow-dropdown: 0 0.75rem 1.5rem rgb(0 0 0 / 12%);
    --pc-shadow-finder: 0 0.5rem 1.5rem rgb(0 0 0 / 8%);
    --pc-icon-sm: 1rem;
    --pc-icon-md: 1.25rem;
    --pc-icon-lg: 1.5rem;
    --pc-icon-stroke: 1.6;
    --pc-control-height: 2.75rem;
    --pc-control-height-compact: 2.25rem;
    --pc-disabled-opacity: 0.48;
    --pc-z-header: 10;
    --pc-z-popover: 20;
    --pc-z-nav: 9;
    --pc-z-flyout: 8;

    /* Chrome (foundation track, 2026-11-10). */
    --pc-announcement-height: var(--pc-control-height-compact);
    --pc-admin-bar-height: 32px;
    --pc-admin-bar-height-mobile: 46px;
    --pc-nav-gap: var(--pc-space-6);
    --pc-nav-gap-compact: var(--pc-space-5);
    --pc-flyout-link-size: var(--pc-text-xl);
    --pc-flyout-visual-min-height: 11.25rem;
    --pc-search-panel-min-width: 20rem;
    --pc-sheet-max-height: 85dvh;
    --pc-dialog-width: 32rem;
    --pc-hover-intent-open: 140ms;
    --pc-hover-intent-close: 280ms;
    --pc-card-media-padding: var(--pc-space-3);
    --pc-card-title-lines: 3;
    --pc-rating-star-size: 0.875rem;

    --pc-motion-fast: 120ms;
    --pc-motion-ui: 180ms;
    --pc-motion-enter: 240ms;
    --pc-announcement-interval: 7s;
    --pc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --pc-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --pc-motion-distance: 0.25rem;
    --pc-scroll-behavior: smooth;
  }

  @media (pointer: coarse) {
    :root {
      --pc-header-compact-search-height: var(--pc-control-height);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --pc-motion-fast: 0ms;
      --pc-motion-ui: 0ms;
      --pc-motion-enter: 0ms;
      --pc-motion-distance: 0px;
      --pc-scroll-behavior: auto;
    }
  }
}