/* ==========================================================================
   tokens.css — design tokens (LOADED FIRST). Values are live's resolved ACSS 3.3.6 tokens
   (docs/scout/GLOBAL-SPEC.md §1, §10; BEHAVIOUR.md §4.2). Names are kept 1:1 with ACSS so ported
   block CSS keeps working. Block/part CSS uses ONLY these tokens (no raw hex).

   1rem = 10px (html { font-size: 62.5% } in base.css).

   Fluid tokens: the ACSS clamp() values verbatim. They interpolate linearly between a 360px and a
   1366px viewport and are clamped outside that range. --text-xs, --text-s and --space-xs have
   min > max in ACSS, so clamp() always returns the min: constant 12px / 13px / 13.51px (live parity).

   Breakpoints (live Bricks uses max-width 991 / 767 / 478; the replica is mobile-first):
     @media (min-width: 479px)   ≥ mobile landscape   (live: > 478)
     @media (min-width: 768px)   ≥ tablet portrait    (live: > 767)
     @media (min-width: 992px)   ≥ desktop            (live: > 991)
     1366px = end of the fluid range / content width; ≥1486px the content is capped (1366 + 2 × 60 gutter).
     Splide sliders use their own max-width queries (1279 / 991 / 767 / 478) from live's data-splide.
   ========================================================================== */

:root {
  --root-font-size: 62.5%;

  /* ---- Brand palette (ACSS, resolved on live) ---------------------------------------------- */
  --primary: #1263FF;
  --primary-hover: #3d81ff;
  --primary-ultra-light: #e6eeff;
  --primary-light: #b3cdff;
  --primary-semi-light: #4d8bff;
  --primary-semi-dark: #003eb3;
  --primary-dark: #002d80;
  --primary-ultra-dark: #001233;

  --secondary: #0F202D;
  --secondary-hover: #122636;
  --secondary-ultra-light: #ecf3f9;
  --secondary-light: #c6dbec;
  --secondary-semi-light: #79acd2;
  --secondary-semi-dark: #2d5f86;
  --secondary-dark: #204460;
  --secondary-ultra-dark: #0d1b26;

  --tertiary: #042E4A;
  --tertiary-hover: #043352;
  --tertiary-ultra-light: #e7f5fe;
  --tertiary-light: #b6e0fb;
  --tertiary-semi-light: #55b6f6;
  --tertiary-semi-dark: #0969aa;
  --tertiary-dark: #064b79;
  --tertiary-ultra-dark: #031e30;

  --base: #000000;
  --base-ultra-light: #f2f2f2;
  --base-light: #d9d9d9;
  --base-semi-light: #a6a6a6;
  --base-semi-dark: #595959;
  --base-dark: #404040;
  --base-ultra-dark: #1a1a1a;

  --neutral: #333333;
  --neutral-ultra-light: #f2f2f2;
  --neutral-light: #d9d9d9;
  --neutral-semi-light: #a6a6a6;
  --neutral-semi-dark: #595959;
  --neutral-dark: #404040;
  --neutral-ultra-dark: #1a1a1a;

  --white: #fff;
  --black: #000;

  /* transparencies used on the page */
  --black-trans-10: rgba(0, 0, 0, .1);
  --black-trans-12: rgba(0, 0, 0, .12);
  --black-trans-14: rgba(0, 0, 0, .14);
  --black-trans-15: rgba(0, 0, 0, .15);
  --black-trans-20: rgba(0, 0, 0, .2);
  --black-trans-24: rgba(0, 0, 0, .24);
  --black-trans-33: rgba(0, 0, 0, .33);
  --black-trans-50: rgba(0, 0, 0, .5);
  --black-trans-60: rgba(0, 0, 0, .6);
  --white-trans-20: rgba(255, 255, 255, .2);
  --white-trans-90: rgba(255, 255, 255, .9);
  --secondary-trans-10: rgba(15, 32, 45, .1);
  /* round 2 (/horses/ + horse single): ACSS :root values from docs/scout/r2/used-css-r2.css (R2-PLAN §7 WP1) */
  --secondary-trans-20: rgba(15, 32, 45, .2);     /* page-hero overlay start (secondary-20) */
  --secondary-trans-70: rgba(15, 32, 45, .7);     /* round 3: page-hero overlay start (secondary-70, the team hero; R3-PLAN §1.2) */
  --tertiary-trans-70: rgba(4, 46, 74, .7);       /* round 4: ACSS name; /our-stories/ hero overlay start ≤478 (R4-PLAN §1.2) */
  --tertiary-trans-90: rgba(4, 46, 74, .9);       /* single trainer card overlay */
  --base-ultra-dark-trans-70: rgba(26, 26, 26, .7);   /* --base-ultra-dark at 70 %: page-hero overlay option (/our-stable/) */

  /* ---- Literal one-offs hard-coded on live (keep literal; see GLOBAL-SPEC §1.2) ------------ */
  --wfx-offcanvas-bg: #042e49;          /* .wlp-header__content — one step off --tertiary on purpose */
  --wfx-menu-label: #798B9C;            /* header "Menu" label */
  --wfx-sold: #F23A11;                  /* sold badge */
  --wfx-ladies: #FF3F9C;                /* ladies-only "New" badge */
  --wfx-ladies-dark: #c3367a;           /* ladies-only button gradient end */
  --wfx-blue-dark: #0B3B99;             /* primary gradient end */
  --wfx-s4-bg: #B3B3B3;                 /* S4 section colour ≥992 (under the image) */
  --wfx-join-end: #9bacb7;              /* #join gradient end */
  --wfx-s4-overlay-start: rgba(173, 173, 173, .43);

  /* gradients */
  --wfx-btn-grad: linear-gradient(180deg, #1263FF 0%, #0B3B99 100%);
  --wfx-btn-grad-ladies: linear-gradient(180deg, #FF3F9C 0%, #c3367a 100%);
  --wfx-panel-grad: linear-gradient(180deg, #1263ff, #0b3b99);           /* blue panels (#brxe-uxddaf …) */
  --wfx-join-grad: linear-gradient(#042e4a, #9bacb7);                    /* #join section */
  --wfx-hero-overlay: linear-gradient(var(--black-trans-60) 50%, var(--secondary) 90%);
  --wfx-s3-overlay: linear-gradient(var(--secondary) 0%, var(--tertiary) 25%);
  --wfx-s4-overlay: linear-gradient(rgba(173, 173, 173, .43), var(--white) 80%);
  --wfx-horse-card-overlay: linear-gradient(var(--secondary-trans-10), var(--secondary));
  --wfx-horse-wrapper-overlay: linear-gradient(var(--secondary-trans-10) 12%, var(--secondary) 48%);

  /* content-preview components (docs/content/PREVIEW-DESIGN.md §2.4) */
  --wfx-feature-card-1: #121f27;         /* /faq/ #brxe-llxjlw card 1 (live literal) */
  --wfx-feature-card-3: #072e48;         /* /faq/ card 3 (live literal) */
  --wfx-slate-overlay: linear-gradient(rgba(4, 46, 74, .8), rgba(57, 91, 113, .95), var(--tertiary));   /* /faq/ #brxe-lwqgbf::before */
  --wfx-timeline-spine: linear-gradient(to right, transparent calc(50% - 2px), var(--secondary-dark) calc(50% - 6px),
                        var(--secondary-dark) calc(50% + 6px), transparent calc(50% + 6px));             /* /our-stories/ #brxe-djpldw, verbatim */
  /* round 4 (/our-stories/, R4-PLAN §1.2 / §1.4): the hero's slate → white fade (live #brxe-pzkwap::before, ≥479 / ≤478)
     and the story-card overlay (live #brxe-qzappi / #brxe-uzfclb ::before, a flat .84 tertiary) */
  --wfx-slate-white-overlay: linear-gradient(rgba(4, 46, 74, .8), rgba(57, 91, 113, .95), var(--white));
  --wfx-slate-white-overlay-m: linear-gradient(var(--tertiary-trans-70) 30%, rgba(79, 100, 114, .98), var(--white));
  --wfx-story-overlay: rgba(4, 46, 74, .84);

  /* third-party skins reproduced as on live (plugin CSS, not ACSS) */
  --wfx-border: #dddedf;                /* Bricks --bricks-border-color: accordion hairlines ≤767px */
  --wfx-grw-text: #555;                 /* Google reviews widget (Rich Plugins) */
  --wfx-grw-muted: #777;
  --wfx-grw-link: #154FC1;
  --wfx-grw-star: #FB8E28;
  --wfx-grw-btn: #1f67e7;               /* "review us on" pill */
  --wfx-grw-card: #f4f4f4;              /* review card background (plugin --rev-color) */
  --wfx-grw-control-bg: #f5f5f5;        /* prev / next background */
  --wfx-grw-control-border: #ccc;       /* prev / next border, scrollbar thumb */
  --wfx-grw-dot: #999;                  /* inactive dots */
  --wfx-grw-text-shadow: #888;          /* "review us on" text shadow */
  --wfx-ff-primary: #1a7efb;            /* Fluent Forms defaults (fluentform-public-default.css) */
  --wfx-ff-secondary: #606266;
  --wfx-ff-error: #f56c6c;
  --wfx-ff-border: #dadbdd;
  --wfx-ff-placeholder: #868e96;        /* fluent-forms-public.css rgb(134, 142, 150) */
  --wfx-iti-arrow: #555;                /* intl-tel-input (intlTelInput.min.css) */
  --wfx-iti-flag-shadow: #888;
  --wfx-iti-hover: rgba(0, 0, 0, .05);
  --wfx-danger: hsl(354, 70%, 54%);     /* ACSS --danger (form error text) */

  /* ---- Semantic roles ------------------------------------------------------------------------ */
  --body-bg-color: var(--white);
  --body-color: var(--tertiary);
  --text-color: var(--tertiary);
  --heading-color: var(--tertiary);
  --text-dark: #000;
  --text-light: #fff;
  --bg-dark: #404040;
  --bg-light: #d9d9d9;
  --link-color: var(--primary);
  --link-color-hover: var(--primary-hover);
  --focus-color: var(--primary);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- Type ------------------------------------------------------------------------------------ */
  --font-body: "Inter", sans-serif;
  --font-heading: "Nimbus Sans Becker DExt", sans-serif;
  --font-accent: "Bebas Neue", sans-serif;
  --heading-font-family: var(--font-heading);
  --text-font-family: var(--font-heading);       /* ACSS: every .text--{size} class renders in Nimbus */
  --heading-font-weight: 700;                    /* resolves to the Nimbus face declared at 900 (live) */
  --text-line-height: calc(10px + 2ex);          /* 27.25px for 16px Inter */
  --heading-line-height: calc(4px + 2ex);

  --h1: clamp(3.1104rem, calc(1.6170835726vw + 2.5282499139rem), 4.737186074rem);
  --h2: clamp(2.592rem, calc(1.3001988072vw + 2.1239284294rem), 3.9rem);
  --h3: clamp(2.16rem, calc(0.8349900596vw + 1.8594035785rem), 3rem);
  --h4: clamp(1.8rem, calc(0.5964214712vw + 1.5852882704rem), 2.4rem);
  --h5: clamp(1.5rem, calc(0.2982107356vw + 1.3926441352rem), 1.8rem);
  --h6: clamp(1.25rem, calc(0.2485089463vw + 1.1605367793rem), 1.5rem);

  --text-xs: clamp(1.2rem, calc(-0.2977632517vw + 1.3071947706rem), 0.9004501688rem);   /* = 12px constant */
  --text-s: clamp(1.3rem, calc(-0.0991052932vw + 1.3356779056rem), 1.200300075rem);     /* = 13px constant */
  --text-m: clamp(1.6rem, calc(0vw + 1.6rem), 1.6rem);                                  /* = 16px */
  --text-l: clamp(1.92rem, calc(0.2115308151vw + 1.8438489066rem), 2.1328rem);
  --text-xl: clamp(2.304rem, calc(0.5358075547vw + 2.1111092803rem), 2.8430224rem);
  --text-xxl: clamp(2.7648rem, calc(1.0188358441vw + 2.3980190961rem), 3.7897488592rem);

  /* ---- Space ----------------------------------------------------------------------------------- */
  --space-xs: clamp(1.3506752532rem, calc(-0.0172384889vw + 1.3568811092rem), 1.3333333333rem); /* = 13.51px constant */
  --space-s: clamp(1.8004501125rem, calc(0.1983597291vw + 1.7290406101rem), 2rem);
  --space-m: clamp(2.4rem, calc(0.5964214712vw + 2.1852882704rem), 3rem);
  --space-l: clamp(3.1992rem, calc(1.2930417495vw + 2.7337049702rem), 4.5rem);
  --space-xl: clamp(4.2645336rem, calc(2.4706425447vw + 3.3751022839rem), 6.75rem);
  --space-xxl: clamp(5.6846232888rem, calc(4.4138933511vw + 4.0956216824rem), 10.125rem);

  --section-space-xs: clamp(2.7013505064rem, calc(1.2909040692vw + 2.2366250415rem), 4rem);
  --section-space-s: clamp(3.6009002251rem, calc(2.3847910288vw + 2.7423754547rem), 6rem);
  --section-space-m: clamp(4.8rem, calc(4.1749502982vw + 3.2970178926rem), 9rem);
  --section-space-l: clamp(6.3984rem, calc(7.0592445328vw + 3.8570719682rem), 13.5rem);
  --section-space-xl: clamp(8.5290672rem, calc(11.6510266402vw + 4.3346976095rem), 20.25rem);
  --section-space-xxl: clamp(11.3692465776rem, calc(18.8923990282vw + 4.5679829274rem), 30.375rem);

  --gutter: clamp(2rem, calc(3.9761431412vw + 0.5685884692rem), 6rem);
  --section-padding-x: var(--gutter);
  --section-padding-block: var(--section-space-m);
  --content-width: 136.6rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --content-gap: var(--space-m);
  --grid-gap: var(--space-m);
  --container-gap: var(--space-xl);
  --paragraph-spacing: 1em;
  --heading-spacing: 1.2em;

  /* ACSS width utilities (fractions of --content-width) */
  --width-m: calc(var(--content-width) * 0.4);    /* 546.4px */
  --width-l: calc(var(--content-width) * 0.6);    /* 819.6px */
  --width-xl: calc(var(--content-width) * 0.8);   /* 1092.8px */

  /* grids */
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));

  /* ---- Shape ------------------------------------------------------------------------------------ */
  --radius: 5px;
  --btn-radius: var(--radius);
  --radius-s: 1rem;          /* slider arrow ends, off-canvas wrapper */
  --radius-m: 1.5rem;        /* stable card image top corners */
  --radius-l: 2rem;          /* image boxes, horse + stable cards, footer social icons */
  --radius-xl: 3rem;         /* blue panels */
  --radius-round: 50%;
  --radius-pill: 100%;       /* Splide dots */

  --shadow-card: 0 0 8.7px 0 rgba(0, 0, 0, .14);          /* .wlp-stable */
  --shadow-control: 0 2px 6px rgba(0, 0, 0, .15);         /* reviews arrows */
  --box-shadow-m: 0 0 40px var(--black-trans-10);          /* ACSS, unused on the homepage */

  /* ---- Layers ----------------------------------------------------------------------------------- */
  --z-hero-bg: 1;
  --z-preview-banner: 990;               /* content-preview banner: below --z-backdrop / off-canvas (PREVIEW-DESIGN §2.4) */
  --z-backdrop: 998;
  --z-offcanvas: 999;
  --z-skip-link: 9999;
  --z-popup: 10000;

  /* ---- Motion ----------------------------------------------------------------------------------- */
  --transition-duration: .3s;
  --transition-timing: ease-in-out;
  --transition-delay: 0s;
  --transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay),
                color var(--transition-duration) var(--transition-timing) var(--transition-delay),
                border var(--transition-duration) var(--transition-timing) var(--transition-delay),
                translate var(--transition-duration) var(--transition-timing) var(--transition-delay);
  --link-transition: var(--transition);
  --offcanvas-dur: .2s;
  --offcanvas-ease: cubic-bezier(.25, 0, .25, 1);
  --slider-ease: cubic-bezier(.25, 1, .5, 1);             /* Splide easing on live */

  /* ---- Buttons v2 (docs/design/BUTTONS.md §4.1 + UPGRADE-SPEC A-B5; parts/button.php + assets/css/parts/buttons.css)
     Styles: primary (solid) · secondary (outline) · secondary on light (dark outline). Sizes: sm · md · lg.
     Every style has a 2px border (primary's is transparent over its fill), so a size has ONE box height
     whatever the style: sm 32 · md 44 · lg 56 px (one line; each wrapped line adds one font-size).
     --btn-radius is declared once, in "Shape" above. */
  --btn-font-family: var(--font-body);
  --btn-font-weight: 700;
  --btn-line-height: 1;
  --btn-letter-spacing: 2.6px;
  --btn-text-transform: uppercase;
  --btn-border-width: 2px;
  --btn-min-width: 14rem;

  --btn-sm-h: 3.2rem;   --btn-sm-font: 1.2rem;   --btn-sm-pad-x: 2.4rem;
  --btn-md-h: 4.4rem;   --btn-md-font: 1.2rem;   --btn-md-pad-x: 3.2rem;
  --btn-lg-h: 5.6rem;   --btn-lg-font: 1.4rem;   --btn-lg-pad-x: 4rem;

  /* Colours. Hover (Pete, 2026-09-29): every wipe is BLUE with a white label, on every surface.
     Secondary / outline buttons fill with the brand primary gradient (#1263FF → #0B3B99, white ≥ 5.1:1);
     primary buttons, already blue, sweep in a deeper royal blue (#0E4FD8 → #0A3386, white ≥ 6.4:1). */
  --btn-primary-bg: var(--wfx-btn-grad);              /* #1263FF → #0B3B99 */
  --btn-primary-text: var(--white);
  --btn-outline: var(--primary);                      /* secondary border on dark surfaces, and every hover ring */
  --btn-outline-text: var(--white);
  --btn-ink: var(--primary-dark);                     /* #002D80: secondary on light (border + label), light-surface fill */
  --btn-ink-text: var(--white);
  --btn-lit: var(--primary-ultra-light);              /* #E6EEFF: retired hover fill (kept for reference) */
  --btn-wipe-blue: var(--btn-primary-bg);             /* secondary / outline hover fill: the brand gradient */
  --btn-wipe-deep: linear-gradient(180deg, #0E4FD8 0%, #0A3386 100%);  /* primary hover fill: deeper royal blue */
  --btn-wipe-text: var(--white);
  --btn-lit-text: var(--secondary);                   /* #0F202D */
  /* Secondary on a busy photo (surface 'photo'): a translucent navy backing under the white label. The S2 tile
     photos have patches where white is 3.76:1; 15 % navy lifts the lightest pixel to 4.6:1, 35 % leaves margin. */
  --btn-scrim: color-mix(in srgb, var(--secondary) 35%, transparent);
  /* Keyboard focus ring (2px, offset 2px): #B3CDFF on dark surfaces (live's button ring), ink on light ones
     (#1263FF was 2.42:1 on the S4 grey image; ink is ≥ 5.9:1 on every light surface, 12.45:1 on white). */
  --btn-focus-dark: var(--primary-light);
  --btn-focus-light: var(--btn-ink);

  /* Motion. Wipe = MX .btn--wipe (0.45s, easeInOutCubic). Glow = MX btn-pulse rebuilt on transform/opacity. */
  --btn-wipe-dur: .45s;
  --btn-wipe-ease: cubic-bezier(.65, 0, .35, 1);
  --btn-wipe-circle-dur: .6s;                         /* round wipe from the pointer (button-wipe.js) */
  --btn-wipe-circle-ease: cubic-bezier(.22, 1, .36, 1); /* fast out of the entry point, soft finish */
  --btn-glow-rgb: 18 99 255;                          /* --primary as an rgb triplet, for the alpha steps */
  --btn-glow-halo: 0 .6rem 2.8rem -.6rem rgb(var(--btn-glow-rgb) / .55);
  --btn-glow-ring: 0 0 0 1px rgb(var(--btn-glow-rgb) / .6), 0 0 1.6rem .2rem rgb(var(--btn-glow-rgb) / .45);
  --btn-glow-dur: 2.4s;
  --btn-glow-ease: cubic-bezier(.22, .61, .36, 1);
  --btn-glow-spread: 1.4rem;                          /* how far the ring travels out on every side */
  /* Runtime (set by JS, inline per .btn--glow): --btn-glow-sx / --btn-glow-sy, the exact ring scale pair
     (animations.js initGlow, UPGRADE-SPEC A-M3). CSS falls back to sx 1.08 and a per-size sy (buttons.css). */
  /* The v1 (ACSS) :root tokens (--btn-padding-block / -inline, --btn-font-size, --btn-border-style,
     --btn-outline-border-width) and --wfx-btn-grad-hover were retired 2026-09-29 once base.css .skip-link moved to
     the v2 tokens (BUTTONS.md §4.4). --btn-padding-* / --btn-font-size now exist only per button (buttons.css). */

  /* ---- Header / off-canvas ---------------------------------------------------------------------- */
  --offcanvas-width: 40rem;          /* ≥479: 50rem (header.css / offcanvas.css) */

  /* ---- Forms (ACSS 3.3.6 form system, live :root values, fluid 360 → 1366; assets/css/parts/forms.css) - */
  --f-label-size: clamp(1.4rem, calc(0.1988071571vw + 1.3284294235rem), 1.6rem);
  --f-label-margin-bottom: 0.5em;
  --f-field-margin-bottom: 1.5em;
  --f-grid-gutter: 2rem;
  --f-input-size: clamp(1.4rem, calc(0.3976143141vw + 1.2568588469rem), 1.8rem);   /* 18 / 15.62 / 14.12px */
  --f-input-height: 5rem;
  --f-input-padding-x: 1em;
  --f-input-padding-y: 0.5em;
  --f-option-label-size: clamp(1.4rem, calc(0.1988071571vw + 1.3284294235rem), 1.6rem); /* 16 / 14.81 / 14.06px */
  --f-danger: var(--wfx-danger);
}