/**
 * Ability Chiropractic — design tokens.
 *
 * Values come from the FSD design system (design-system/foundations/*), which measured
 * them from the TMC mockups and TheGem staging CSS rather than inventing them.
 *
 * Hand-written CSS, not SCSS, and enqueued directly: the same reasoning already recorded
 * in booking.css — it applies on a plain file sync with no Live Sass recompile.
 */

/* ---------------------------------------------------------------------------
   Font faces the theme is missing.
   theme.scss declares Inter 400 and 800 only. CSS weight matching resolves an
   unmatched 700 upward first, so every eyebrow, button label and <strong> on the
   site currently renders at 800, and italics are synthesised obliques.
   These two faces are additive — the existing @font-face rules in theme.scss are
   left untouched, which is what keeps this file free of a SCSS recompile.
   Latin subset only (Google Fonts v20), 36 KB and 37 KB.
--------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Restores position:sticky inside page content.

   thegem/style.css:2708 sets `#page { position: relative; overflow: hidden; }`.
   overflow:hidden makes #page a scroll container, so every sticky descendant
   resolves against a scrollport that never scrolls — measured, a sticky element
   asking for top:100px ended at top:-330px. The Our Philosophy heading and card
   stack both depend on sticky.

   overflow-x:clip with overflow-y:visible is the one combination that clips
   without establishing a scroll container; hidden/visible would compute to auto
   and reintroduce the problem. Same specificity as the rule it neutralises, so it
   wins on source order alone — no !important.

   @supports guards pre-16 Safari, which keeps overflow:hidden: it loses sticky but
   keeps the layout, and the JS driver already degrades to a plain stacked list.
--------------------------------------------------------------------------- */
@supports (overflow: clip) {
    #page {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* ---------------------------------------------------------------------------
   Tokens
--------------------------------------------------------------------------- */
:root {
    /* Brand. The mark in ability-mark.svg is the authority for --ab-b600, not the
       theme CSS — four near-identical blues are live today and this is the one
       that matches the logo. */
    --ab-b700: #3A6DA6;
    --ab-b600: #4981C2;
    --ab-b100: #EEF4FA;
    --ab-b50: #F7FAFD;
    --ab-aqua: #A1E1E2;
    /* Star gold. Laura (Aug 27): the ribbon stars should be yellow — "the yellow in the
       Columbus Crew logo or the standard star yellow/gold that Google uses". Crew gold
       (#FEDD00) wins because the same ribbon carries the Crew partnership line; Google's
       amber (#FBBC04) stays reserved for the review cards, whose stars are Google's marks. */
    --ab-star-gold: #FEDD00;

    /* Neutrals. Ink is #333333, measured off the mockups' glyph cores — not pure
       black, which appears only inside photographs. */
    --ab-ink: #333333;
    --ab-ink2: #5F5F5F;
    --ab-ink3: #7B8794;
    --ab-bd: #DDE5EC;
    --ab-white: #FFFFFF;

    /* On dark surfaces. Ink/Ink2/Ink3 only work on white or a light tint; anything
       on a blue band needs its own ladder or every section invents its own rgba. */
    --ab-on-dark: #FFFFFF;
    --ab-on-dark-2: rgba(255, 255, 255, .88);
    --ab-on-dark-3: rgba(255, 255, 255, .66);
    --ab-on-dark-bd: rgba(255, 255, 255, .55);

    /* Media scrim. The layer between a video or photograph and the copy laid over it. Not a
       blue off the brand ladder — a scrim's job is to stay unread while the type on top gets
       its contrast, and Blue 600 at this alpha tints the footage instead of settling it. Deep
       navy at 57%, multiplied rather than laid over: a normal-blend black flattens a video
       toward grey and takes its highlights with it, multiply keeps the darks the footage
       already has and deepens the mid tones. */
    --ab-scrim: #1B324C91;

    /* Seam. Two surfaces of the same colour meeting edge to edge read as one and the
       boundary between them is lost; the seam is the hairline that puts it back. Tuned
       to be legible at the join and unnoticeable anywhere else. */
    --ab-seam-dark: rgba(255, 255, 255, .22);
    --ab-seam-light: rgba(51, 51, 51, .10);

    /* Status */
    --ab-ok: #1E7F5C;
    --ab-soon: #B4541E;
    --ab-shut: #8A9199;

    /* Error — form validation (CF7, ZIP lookup). Success stays minimal: text
       reuses --ab-ok; the one success surface in theme.scss stays literal. */
    --ab-err: #DC2626;
    --ab-err-surface: #FEE2E2;
    --ab-err-text: #991B1B;

    /* Radius — four values plus 50% for circular avatars and marker dots. */
    --ab-r-sm: 8px;
    --ab-r-md: 12px;
    --ab-r-lg: 20px;
    --ab-r-pill: 999px;

    /* Pager dots, on any ground.
     *
     * Each dot keeps its own colour per state — Border grey when off, Blue 600 when on. What a
     * dark ground adds is a white hairline OUTSIDE it, the same device the footer's Schedule
     * button uses: the fill stays what it is and an outline separates it from a ground close to
     * its own value.
     *
     * One contextual token rather than a rule per block. Light grounds resolve it to
     * transparent and are untouched; the on-dark block of ability-blocks.css overrides it
     * alongside --ab-fg, so any band that reads on-dark picks it up without naming the block. */
    --ab-dot-ring: transparent;

    /* Spacing, 8pt */
    --ab-s-1: 4px;
    --ab-s-2: 8px;
    --ab-s-3: 12px;
    --ab-s-4: 16px;
    --ab-s-6: 24px;
    --ab-s-8: 32px;
    --ab-s-12: 48px;
    --ab-s-16: 64px;
    /* The section ladder's `lg` step at >=1024. Named rather than written as a literal so
       "is this on the scale?" stays answerable by reading the token. */
    --ab-s-24: 96px;

    /* Layout. The container matches the site's real content width (1212 - 42 = 1170). */
    --ab-gutter: 18px;
    --ab-max: 1170px;
    --ab-max-narrow: 760px;
    --ab-max-wide: 1280px;

    /* Type */
    --ab-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ab-t-display: 35px;
    --ab-t-heading: 28px;
    --ab-t-subhead: 22px;
    --ab-t-body: 16px;
    --ab-t-small: 13px;
    --ab-t-eyebrow: 11px;
    --ab-t-button: 13px;

    /* Contextual. Every block reads these instead of hardcoding a colour, so a band
       recolours its children by reassigning them once. */
    --ab-fg: var(--ab-ink);
    --ab-fg-2: var(--ab-ink2);
    --ab-fg-3: var(--ab-ink3);
    --ab-accent: var(--ab-b600);
    --ab-rule: var(--ab-bd);

    /* The one gradient in the brand. Silhouettes only — bands stay flat. */
    --ab-grad: linear-gradient(105deg, #4981C2 0%, #6FA3D2 42%, #A1E1E2 100%);

    /* Elevation — the two shadow steps a resting card may use. Hover moves one step
       up this ladder; nothing ever moves two. */
    /* The design system's default card chrome, paired with a 1px --ab-bd hairline: the
       reference sheet's `.c` is border + this, and it is what the doctor carousel uses.
       --ab-shadow-card and its hover sibling are the lifted treatment, for surfaces that
       are meant to float. */
    --ab-shadow-card-sm: 0 2px 10px rgba(28, 52, 84, .06);
    --ab-shadow-card: 0 6px 22px rgba(28, 52, 84, .12);
    --ab-shadow-card-hover: 0 10px 30px rgba(28, 52, 84, .18);

    /* The edge a blue control needs when it lands on a blue ground.
     *
     * The palette has one problem it cannot solve with fill alone: a Blue 600 button on a
     * Blue 700 band is a 1.31:1 boundary, and the docked CTA is Blue 700 on Blue 700 — a
     * boundary of exactly 1:1, which is why it disappears the moment it floats over the
     * footer. Nothing about the shape survives; the label is left hanging in the band.
     *
     * .65 is set by that worst case, not by taste. White at .65 over Blue 700 resolves to
     * ~#A6BDD7, which is 3.23:1 against the Blue 700 ground — past the 3:1 WCAG 1.4.11 asks
     * of a boundary a control depends on to be found. Over a Blue 600 fill the same alpha
     * reads 3.47:1, so one value covers both and the two never drift apart.
     *
     * Translucent rather than solid white, and for a reason beyond softness: the ring has to
     * work on a photograph as well as on a flat band, and an alpha edge takes the tone of
     * whatever is behind it instead of stamping the same white line over every ground. */
    --ab-ring-on-dark: rgba(255, 255, 255, .65);

    /* Motion. The house entrance ease — the same curve the closing lines ship with. */
    --ab-ease-out: cubic-bezier(.22, 1, .32, 1);
}

@media (min-width: 1024px) {
    :root {
        --ab-gutter: 40px;
        --ab-t-display: 48px;
        --ab-t-heading: 35px;
    }
}