/* ==========================================================================
   WeBuyRangeRovers design tokens, brand system v1.0 (4 November 2026)
   Source: design/mockup/brand-system-v1.0.pdf (replaces the v2 palette and fonts).
   Fonts: Montserrat 700 and 800 for headings, nav and buttons. Inter 400 to 700
   for body and controls. Self hosted variable woff2, latin subset, font-display
   swap, with metric matched Arial fallbacks. See design-system.md.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/Montserrat-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric matched fallbacks, one face per weight. size-adjust is the measured width ratio of the web font to Arial (Liberation Sans)
   at that weight, so the swap moves almost nothing. Weights 600 and up use the real bold cut of the system font. */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 500; size-adjust: 113.33%; ascent-override: 88.5%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 600; size-adjust: 107.87%; ascent-override: 88.5%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 700; size-adjust: 109.49%; ascent-override: 88.5%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 800; size-adjust: 111.62%; ascent-override: 88.5%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 400; size-adjust: 105.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 500; size-adjust: 106.23%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 600; size-adjust: 99.82%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 700; size-adjust: 100.91%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }

:root {
  /* ---------- Brand palette (brand system v1.0, exact hexes) ---------- */
  --forest: #081C1E;        /* deep forest: header, footer, hero, dark sections */
  --charcoal: #10191E;      /* headings, body text, dark surfaces */
  --green: #167A38;         /* primary green: buttons (white text) and links */
  --green-hover: #0E602C;   /* hover and active */
  --lime: #91D431;          /* signature lime: accent marks. Dark text only, never white */
  --bright: #27D466;        /* bright green: small accents on dark surfaces only */
  --off-white: #FAFBF9;     /* page background */
  --soft-grey: #F2F5F3;     /* alternate sections */
  --slate: #26353B;         /* secondary surfaces and strong secondary text */
  --muted: #62716C;         /* secondary copy */
  --border: #DDE5E0;        /* dividers and card borders */
  --white: #FFFFFF;

  /* ---------- Derived shades (only where a role needed one, all checked for AA) ---------- */
  --forest-950: #051315;    /* deepest overlay behind hero text */
  --forest-800: #0F2D30;    /* raised dark surface, CTA band, slots */
  --forest-700: #1E4043;    /* decorative dividers on dark */
  --forest-500: #5E8486;    /* control borders on dark, 3:1 or better */
  --edge: #74837D;          /* form control borders, 3:1 or better (the PDF border #DDE5E0 is 1.3:1) */

  /* ---------- Neutral roles ---------- */
  --line: var(--border);
  --card: var(--white);

  /* ---------- Text roles ---------- */
  --text: var(--charcoal);
  --text-muted: var(--muted);
  --text-inverse: #FFFFFF;           /* on forest and dark slots */
  --text-inverse-muted: #CBD8D3;     /* secondary text on forest */

  /* ---------- Status and utility ---------- */
  --error: #B91C1C;
  --error-bg: #FEF2F2;
  --success: #0E602C;
  --success-bg: #EAF6EE;
  --gb-blue: #084697;       /* GB badge on the registration input */
  --focus-light: #0E602C;   /* focus ring on light surfaces (lime fails 3:1 on light) */
  --focus-dark: #91D431;    /* focus ring on dark surfaces */

  /* ---------- Gradients (dark surfaces only, text on them always white) ---------- */
  --grad-slot: linear-gradient(135deg, #0F2D30 0%, #173C3F 55%, #081C1E 100%);
  --grad-card-shade: linear-gradient(180deg, rgba(5, 19, 21, 0) 35%, rgba(5, 19, 21, 0.92) 100%);
  --grad-hero: linear-gradient(90deg, rgba(8, 28, 30, 0.92) 0%, rgba(8, 28, 30, 0.62) 45%, rgba(8, 28, 30, 0.04) 100%);

  /* ---------- Typography ---------- */
  --font-head: "Montserrat", "Montserrat Fallback", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, "Segoe UI", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-xbold: 800;

  /* Scale from the PDF. Desktop: H1 64, H2 44, H3 24, body 16, intro 18, nav and buttons 15, small 14.
     Mobile: H1 40, H2 32, H3 22, body 16. Fluid between 375px and 1280px. */
  --fs-xs: 0.8125rem;                                         /* 13 captions and slot notes */
  --fs-sm: 0.875rem;                                          /* 14 small and labels */
  --fs-nav: 0.9375rem;                                        /* 15 nav and buttons */
  --fs-base: 1rem;                                            /* 16 body */
  --fs-md: 1.125rem;                                          /* 18 large intro */
  --fs-lg: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);       /* 19 to 21 card titles in dense grids */
  --fs-xl: clamp(1.375rem, 1.323rem + 0.221vw, 1.5rem);       /* 22 to 24 H3 */
  --fs-2xl: clamp(2rem, 1.689rem + 1.326vw, 2.75rem);         /* 32 to 44 H2 */
  --fs-3xl: clamp(2.5rem, 1.878rem + 2.652vw, 4rem);          /* 40 to 64 H1 */

  --lh-tight: 1.08;         /* H1 */
  --lh-snug: 1.15;          /* H2 */
  --lh-h3: 1.2;
  --lh-intro: 1.55;
  --lh-normal: 1.6;         /* body */
  --lh-relaxed: 1.7;
  --tracking-tight: -0.035em;
  --tracking-wide: 0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --section-y: clamp(3.5rem, 2.36rem + 4.86vw, 6.25rem);      /* 56 to 100 */
  --gutter: 15px;          /* 15px mobile, 20px from 768px */
  --container: 1200px;
  --container-narrow: 50rem;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;       /* buttons and inputs */
  --radius-lg: 16px;       /* cards */
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(8, 28, 30, 0.08), 0 1px 1px rgba(8, 28, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(8, 28, 30, 0.1), 0 1px 3px rgba(8, 28, 30, 0.06);
  --shadow-lg: 0 14px 36px rgba(8, 28, 30, 0.2), 0 3px 8px rgba(8, 28, 30, 0.08);
  --shadow-card: 0 12px 35px rgba(8, 28, 30, 0.07);
  --shadow-btn: 0 8px 20px rgba(15, 106, 50, 0.2);

  /* ---------- Sizing ---------- */
  --tap: 2.75rem;          /* 44px minimum tap target */
  --btn-h: 3.125rem;       /* 50px buttons */
  --control-h: 3rem;       /* 48px form controls */
  --header-h: 4rem;        /* 64px mobile header row */
  --bar-h: 4rem;           /* 64px sticky mobile call and valuation bar */
  --hero-min: 620px;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --icon-xl: 2.75rem;

  /* ---------- Breakpoints ----------
     Custom properties cannot be used inside @media, so the values are
     repeated literally in components.css. Kept here for JS and docs.
       mobile  : 0 to 639px
       tablet  : 640px to 1023px (gutter becomes 20px at 768px)
       desktop : 1024px and up                                           */
  --bp-tablet: 640px;
  --bp-desktop: 1024px;

  /* ---------- Focus ring ---------- */
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--focus-light);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}
@media (min-width: 768px) { :root { --gutter: 20px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}