/* =========================================================================
   BOXT design system — fonts, tokens, reset, base typography
   Reverse-engineered from the live site. All values are our own variables.
   ========================================================================= */

/* ---- Self-hosted display/body font (Sofia Pro family) ------------------- */
@font-face {
    font-family: "Sofia";
    src: url("/assets/fonts/sofia-light.woff2") format("woff2");
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Sofia";
    src: url("/assets/fonts/sofia-light-italic.woff2") format("woff2");
    font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "Sofia";
    src: url("/assets/fonts/sofia-regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Sofia";
    src: url("/assets/fonts/sofia-bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    /* Brand palette */
    --ink:            #2d3d4d;   /* primary heading / text */
    --muted:          #5b6b78;   /* secondary text */

    --coral:          #1f7ae0;   /* primary CTA / brand accent */
    --coral-hover:    #1766bd;
    --coral-dark:     #0f4f95;
    --coral-tint:     #eef7ff;

    --green:          #00a56f;   /* action green (Choose / quote CTAs) */
    --green-hover:    #018f60;
    --green-tint:     #e0f3ed;
    --green-text:     #00824f;   /* darker green for green-on-white TEXT (meets WCAG AA 4.5:1) */

    --gold:           #1766bd;
    --gold-tint:      #eef7ff;

    /* Surfaces */
    --white:          #ffffff;
    --surface:        #f5f7f9;   /* page / section background */
    --surface-2:      #f0f3f6;   /* borders, alt panels */
    --line:           #e6e9ee;   /* hairlines */

    /* Pastel section tint (used by .chip--compact) */
    --tint-blue:      #eef9ff;

    /* Typography */
    --font: "Sofia", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fs-display: clamp(2rem, 1.2rem + 3.2vw, 3rem);     /* hero h1 → 48px */
    --fs-h2:      clamp(1.5rem, 1.1rem + 1.6vw, 2rem);   /* section heading → 32px */
    --fs-h3:      clamp(1.25rem, 1rem + 1vw, 1.6rem);
    --fs-lead:    1.125rem;
    --fs-body:    1rem;
    --fs-sm:      0.875rem;
    --fs-xs:      0.75rem;

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

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 27, 39, 0.06);
    --shadow:    0 6px 12px rgba(0, 27, 39, 0.10);
    --shadow-lg: 0 16px 40px rgba(0, 27, 39, 0.14);

    /* Layout */
    --container: 1200px;
    --container-wide: 1440px;
    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);  /* 16px → 32px (matches real side padding) */

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* [hidden] must always win, even over component rules that set display
   (e.g. flex/grid). Without this, an element toggled via the `hidden`
   attribute can stay visible because a class rule overrides the UA default. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { color: var(--muted); }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* Honour the OS "reduce motion" preference: near-instant transitions/animations
   and no smooth scrolling. (The hero video autoplay is handled in main.js.) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Layout utilities --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.text-center { text-align: center; }
/* Screen-reader-only: removes from the visual layout but keeps it in the
   accessibility tree (e.g. a page-level <h1> on the results screen). */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.accent { color: var(--coral); }
.eyebrow {
    display: inline-block; font-weight: 700; font-size: var(--fs-xs);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral);
}