/* Design tokens. Mobile-first: every value here is the mobile value.
   Breakpoints (min-width, never max-width):
     48rem =  768px  tablet
     64rem = 1024px  desktop
     80rem = 1280px  wide
*/

:root {
    /* Brand */
    --c-brand: #0B476F;
    --c-brand-dark: #083755;
    /* Hover surface: the brand blue at ~15% over white. The old #F0F4F6 was so close
       to white that hover was effectively invisible. */
    --c-brand-tint: #DBE4EB;
    /* One step further, for hovers that sit on an already-tinted row. */
    --c-brand-tint-strong: #C3D2DE;
    --c-accent: #FF8154;
    --c-accent-dark: #E8663A;
    --c-success: #146E37;
    --c-success-tint: #E8F3EC;
    /* Unavailability, not error. White on this reads at ~5.9:1, so the badge text passes AA. */
    --c-danger: #B3261E;
    --c-danger-tint: #FCE9E7;
    --c-highlight: #FFE43C;

    /* Surfaces */
    --c-bg: #FCFCFC;
    --c-surface: #FFFFFF;
    --c-surface-sunken: #F7F7F7;
    --c-img-bg: #F5F5F5;

    /* Text */
    --c-text: #111111;
    --c-text-soft: #5B5B5B;
    --c-text-muted: #767676;
    --c-text-on-brand: #FFFFFF;

    /* Lines */
    --c-border: #E4E7EA;
    --c-border-strong: #C9CFD4;

    /* Fluid type scale. clamp(min, preferred, max) — grows with the viewport,
       so we never need a media query just to resize text. */
    --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --step-0: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
    --step-1: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --step-3: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
    --step-4: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
    --step-price: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgb(17 17 17 / 0.06), 0 1px 3px rgb(17 17 17 / 0.05);
    --shadow-md: 0 2px 8px rgb(17 17 17 / 0.06), 0 8px 24px rgb(17 17 17 / 0.05);
    --shadow-up: 0 -2px 12px rgb(17 17 17 / 0.10);

    /* Minimum touch target. Never ship a tappable thing smaller than this. */
    --tap: 44px;

    /* Layout */
    --container: 1260px;
    --gutter: var(--sp-4);

    --font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --z-sticky: 50;
    --z-drawer: 100;
    --z-backdrop: 90;
}

@media (min-width: 48rem) {
    :root {
        --gutter: var(--sp-5);
    }
}