/*
 * Design tokens.
 *
 * Extracted from _design/*.dc.html. The design system file is treated as the
 * spec; where the page comps disagree with it, the spec wins and the
 * divergence is noted inline. See the handover notes for the full list.
 *
 * Two deliberate departures from the raw design files:
 *
 *   1. Sizes are rem, not px. The comps are px throughout. rem honours the
 *      browser font-size setting, which matters for a 52-year-old reading in
 *      a truck cab. 1rem = 16px, so every value below maps back to the comp.
 *   2. Type is fluid. clamp() interpolates between the two artboard widths the
 *      designs were actually drawn at — 390px and 1360px — so there is no jump
 *      at a breakpoint. The min and max of each clamp are the exact mobile and
 *      desktop values from the design system's type table.
 *
 * This file declares custom properties only. No selectors, no element styles.
 */

:root {

	/* ============================================================ COLOR ==
	 * "Two working colors. Everything else is ink and paper."
	 * Design system section 01.
	 */

	--sq-color-ink: #131313;          /* body text, borders, dark panels */
	--sq-color-blue: #23478c;         /* links, headers, trust marks */
	--sq-color-orange: #d95a15;       /* primary action only */
	--sq-color-paper: #ffffff;        /* cards, forms */
	--sq-color-concrete: #efeeeb;     /* page background, alt bands */

	--sq-color-support: #4a4a47;      /* captions and labels — never lighter on light */
	--sq-color-hairline: #cfcec9;     /* 1px rules */

	/* Interaction states. */
	--sq-color-orange-hover: #b84a0e;

	/* Safety Orange as *text* on a light band.
	 *
	 * #d95a15 on paper is 3.9:1. That clears WCAG AA for large text (>=18.66px
	 * bold, so the 19px buttons are fine) but fails the 4.5:1 normal-text
	 * threshold — and the eyebrow label the design system paints in it is
	 * 14px. This is the same hue darkened until it passes at any size:
	 * 6.1:1 on paper, 5.3:1 on concrete.
	 *
	 * Fills stay #d95a15. Only text switches to this. */
	--sq-color-orange-text: #a8420c;

	/* Dark ramp — three steps, in this order only.
	 * cool = the objection block, ink = the footer, black = the closing CTA
	 * (once per page). */
	--sq-color-cool: #15181e;
	--sq-color-black: #000000;

	/* A card raised off the cool band. The dark ramp has no surface step of its
	 * own, and a card painted in --sq-color-cool on a cool band is invisible —
	 * the Problem comp draws it one step lighter with a visible edge.
	 *
	 * Contrast on the raised surface: --sq-color-on-dark-body 12.9:1,
	 * --sq-color-cool-muted 3.6:1 — large text only, which is all it carries. */
	--sq-color-cool-raised: #1e232c; /* card surface on a cool band */
	--sq-color-cool-border: #39414f; /* its 2px edge */
	--sq-color-cool-muted: #6e7887;  /* the ordinal on it — 24px+ bold only */

	/* On dark backgrounds. The light-band support and hairline colors do not
	 * have enough contrast against ink, so the dark bands carry their own. */
	--sq-color-on-dark-body: #e4e3df;     /* body copy on ink/cool/black */
	--sq-color-on-dark-muted: #a3a19c;    /* de-emphasised text on dark only */
	--sq-color-on-dark-hairline: #3a3a38; /* rules inside dark bands */

	/* Eyebrow / label on dark. Supersedes the #f0a06a swatch in the design
	 * system: both clear AA on every dark band, and this is the one the Final
	 * CTA and Nav comps actually use. 6.8:1 on cool, 7.1:1 on ink, 8.1:1 on
	 * black. (#f0a06b in the Local SEO comps was a typo for #f0a06a; neither
	 * survives.) */
	--sq-color-on-dark-accent: #ff7a2f;

	/* Surface steps between paper and concrete. Used for hatched image
	 * placeholders, table zebra rows and inset panels. */
	--sq-color-surface-raised: #f5f4f1;
	--sq-color-surface-sunken: #e4e3df;
	--sq-color-surface-track: #dedcd7;

	/* Semantic. Only the checklist ticks, form errors and status pills. */
	--sq-color-success: #1e6b3a;
	--sq-color-success-on-dark: #8ae0a8;
	--sq-color-danger: #8b2e1a;
	--sq-color-danger-surface: #fdf3f1;
	--sq-color-rating: #ffd400;           /* review stars */

	/* Disabled controls. Exempt from the contrast floor by WCAG 1.4.3. */
	--sq-color-disabled-surface: #efeeeb;
	--sq-color-disabled-border: #cfcec9;
	--sq-color-disabled-ink: #8b8a85;

	/* Screenshot chrome. The GBP comps mock Google's own UI; these are not
	 * SharpQuery brand colors and must not leak into site furniture. */
	--sq-color-mock-shell: #1e232c;
	--sq-color-mock-shell-2: #39414f;
	--sq-color-mock-ink: #6e7887;
	--sq-color-mock-line: #c9ccd2;
	--sq-color-mock-line-2: #d5d7db;
	--sq-color-mock-tint: #c7d0e2;

	/* Roles. Components reference these, not the raw palette above, so a band
	 * can flip light-on-dark by re-declaring four properties. */
	--sq-bg: var(--sq-color-paper);
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-support);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-hairline);
	--sq-accent: var(--sq-color-orange-text);
	--sq-link: var(--sq-color-blue);
	--sq-link-hover: var(--sq-color-orange-text);


	/* ============================================================= TYPE ==
	 * Barlow Condensed for headlines. Barlow for everything read closely.
	 * Design system section 02.
	 */

	--sq-font-display: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--sq-font-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--sq-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Fluid scale: clamp(mobile, interpolated, desktop), 390px → 1360px.
	 * Each pair is the design system's own mobile/desktop figure. */

	/* Display / hero H1. 41 → 64. */
	--sq-text-display: clamp(2.5625rem, 1.985rem + 2.371vw, 4rem);

	/* Oversized homepage hero. 62 → 104. Reserved for the front page — see
	 * the note in the handover about the three competing display scales. */
	--sq-text-display-xl: clamp(3.875rem, 2.82rem + 4.33vw, 6.5rem);

	/* Section H2. 38 → 56. */
	--sq-text-h2: clamp(2.375rem, 1.923rem + 1.856vw, 3.5rem);

	/* H3. 22 → 26. */
	--sq-text-h3: clamp(1.375rem, 1.275rem + 0.412vw, 1.625rem);

	/* Lead. 19 → 21. */
	--sq-text-lead: clamp(1.1875rem, 1.137rem + 0.206vw, 1.3125rem);

	/* Body. 17 → 18. */
	--sq-text-body: clamp(1.0625rem, 1.037rem + 0.103vw, 1.125rem);

	/* Fixed steps. Small is the floor for anything a customer must read. */
	--sq-text-small: 1rem;        /* 16 */
	--sq-text-label: 0.875rem;    /* 14 — uppercase label, 0.14em */
	--sq-text-label-sm: 0.8125rem;/* 13 — dense label, 0.12em */
	--sq-text-micro: 0.75rem;     /* 12 — data tables and figure captions only */

	/* Weights. */
	--sq-weight-regular: 400;
	--sq-weight-medium: 500;
	--sq-weight-semibold: 600;
	--sq-weight-bold: 700;

	/* Line heights. The comps use twenty distinct values; these are the six
	 * the design system actually specifies. */
	--sq-leading-display: 0.95;  /* condensed headlines */
	--sq-leading-tight: 1;       /* section H2 */
	--sq-leading-snug: 1.25;     /* H3 */
	--sq-leading-normal: 1.5;    /* lead, small */
	--sq-leading-relaxed: 1.6;   /* body */
	--sq-leading-loose: 1.7;     /* long-form prose */

	/* Letter spacing. */
	--sq-tracking-display: -0.01em; /* condensed display only */
	--sq-tracking-normal: 0;
	--sq-tracking-label: 0.14em;    /* 14px uppercase label */
	--sq-tracking-label-sm: 0.12em; /* 13px uppercase label */
	--sq-tracking-form: 0.06em;     /* form labels */

	/* Measure. Body copy never runs the full page width. */
	--sq-measure: 42.5rem;       /* 680 — design system spec */
	--sq-measure-narrow: 38.75rem; /* 620 — hero subheads and pull quotes */


	/* ========================================================== SPACING ==
	 * 8px base. Design system section 06.
	 */

	--sq-space-1: 0.25rem;  /*  4 */
	--sq-space-2: 0.5rem;   /*  8 */
	--sq-space-3: 0.75rem;  /* 12 */
	--sq-space-4: 1rem;     /* 16 */
	--sq-space-5: 1.5rem;   /* 24 */
	--sq-space-6: 2rem;     /* 32 */
	--sq-space-7: 3rem;     /* 48 */
	--sq-space-8: 4rem;     /* 64 */
	--sq-space-9: 6rem;     /* 96 */

	/* Off-scale, but load-bearing in every comp. Kept as named layout values
	 * rather than pretending the 8px scale covers them. */
	--sq-space-gutter-mobile: 1.125rem; /* 18 */
	--sq-space-gutter-desktop: 2.5rem;  /* 40 */
	--sq-space-card-gap: 1.25rem;       /* 20 — grid gap between cards */
	--sq-space-card-padding: 1.625rem;  /* 26 — card interior */
	--sq-space-section-mobile: 2.5rem;      /* 40 */
	--sq-space-section-mobile-end: 2.75rem; /* 44 — comps run a little deeper at the foot */
	--sq-space-section-desktop: 4.5rem;     /* 72 */

	/* Resolved layout spacing. Overridden at the md breakpoint in base.css. */
	--sq-gutter: var(--sq-space-gutter-mobile);
	--sq-section-padding: var(--sq-space-section-mobile);
	--sq-section-padding-end: var(--sq-space-section-mobile-end);


	/* =========================================================== LAYOUT == */

	--sq-container: 80rem;         /* 1280 — max content width */
	--sq-container-narrow: 48.75rem; /* 780 — the comps' most-used text panel */
	--sq-container-form: 32.5rem;  /* 520 — audit form */
	--sq-container-sticky: 26.25rem; /* 420 — mobile sticky bar, full-width CTA */


	/* ==================================================== BORDERS & EDGE ==
	 * "Hard 2px borders, no blur shadows, no rounded pills."
	 */

	--sq-border-width: 2px;      /* the standard rule and every card edge */
	--sq-border-width-hair: 1px; /* hairline dividers */
	--sq-border-width-accent: 10px; /* testimonial left edge */

	--sq-radius: 2px;   /* every button, input and card */
	--sq-radius-full: 50%; /* avatars and numbered step circles only */

	/* Hard offset shadows. No blur, ever. */
	--sq-shadow-pressed: 2px 2px 0 var(--sq-color-ink); /* primary button :active */
	--sq-shadow: 4px 4px 0 var(--sq-color-ink);         /* primary button rest */
	--sq-shadow-raised: 6px 6px 0 var(--sq-color-ink);  /* raised card, once per screen */


	/* ======================================================== CONTROLS == */

	--sq-control-height: 3.625rem;      /* 58 — standard button and input */
	--sq-control-height-lg: 4rem;       /* 64 — hero, closing CTA, mobile full-width */
	--sq-control-height-sm: 2.75rem;    /* 44 — small button, also the tap-target floor */
	--sq-control-height-nav: 3rem;      /* 48 — header phone button */
	--sq-control-height-sticky: 3.375rem; /* 54 — mobile sticky bar */

	--sq-control-padding-x: 1.75rem;    /* 28 */
	--sq-control-padding-x-sm: 1.125rem;/* 18 */
	--sq-input-padding-x: 0.875rem;     /* 14 */

	--sq-tap-target: 2.75rem;           /* 44 — WCAG 2.5.8 floor */
	--sq-header-height: 4.5rem;         /* 72 */


	/* ======================================================== MOTION ==
	 * The comps declare exactly one transition.
	 */

	--sq-duration: 0.15s;
	--sq-duration-slow: 0.3s;
	--sq-ease: ease;
	--sq-transition: transform var(--sq-duration) var(--sq-ease);


	/* ==================================================== BREAKPOINTS ==
	 * The comps contain no media queries — mobile and desktop are separate
	 * artboards at 390px and 1360px. These are therefore chosen, not
	 * extracted, and sit in the gaps between the two.
	 *
	 * Custom properties cannot be used in media query conditions, so these
	 * are documentation. The literal values are repeated in base.css and in
	 * each section stylesheet; keep them in step.
	 *
	 *   --sq-bp-sm:  30em   /  480px   two-up card grids
	 *   --sq-bp-md:  48em   /  768px   section padding and gutters step up
	 *   --sq-bp-lg:  61.25em / 980px   desktop nav replaces the toggle
	 *   --sq-bp-xl:  73.75em / 1180px  four-column readability floor
	 *
	 * xl used to be the width the container stopped growing at. The container
	 * is 80rem now and xl deliberately stayed at 73.75em, because what it
	 * actually gates is the point four columns of body copy stop being too
	 * narrow to read — see the readability floors in CLAUDE.md. Moving it to
	 * 80em would make `factors` wait 100px longer for a layout that already
	 * has the room.
	 */
	--sq-bp-sm: 30em;
	--sq-bp-md: 48em;
	--sq-bp-lg: 61.25em;
	--sq-bp-xl: 73.75em;


	/* =============================================================== Z ==
	 * Named so nothing gets a stray z-index: 9999.
	 */

	--sq-z-base: 1;
	--sq-z-sticky-bar: 40;
	--sq-z-header: 50;
	--sq-z-skip-link: 100;
}

/* Layout spacing steps up once, at md. Declared here rather than in base.css
 * so every consumer of the tokens gets the same resolved values. */
@media (min-width: 48em) {
	:root {
		--sq-gutter: var(--sq-space-gutter-desktop);
		--sq-section-padding: var(--sq-space-section-desktop);
		--sq-section-padding-end: var(--sq-space-section-desktop);
	}
}

/*
 * Safety Orange as a band.
 *
 * The one band where the roles flip to *ink*, not paper, and the arithmetic is
 * why. #D95A15 has a relative luminance of 0.221, so white on it is 3.87:1 —
 * it clears the 3:1 large-text floor and misses the 4.5:1 normal-text floor.
 * And nothing lighter can rescue it: white is already the brightest colour
 * there is, so 3.87 is the ceiling for light-on-orange. Ink is 4.80:1 and
 * passes at any size.
 *
 * The practical rule that falls out: on this band a headline may be white
 * (large text, verified above) but body copy, labels and lists may not. A
 * section that wants light body copy needs a darker field — #B84A0E, the
 * hover orange, is 5.22:1 against white.
 *
 * Rationed like the dark ramp: the closing CTA, once per page.
 */
.sq-on-orange {
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-ink);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-orange-hover);
	--sq-accent: var(--sq-color-ink);
	--sq-link: var(--sq-color-ink);
	--sq-link-hover: var(--sq-color-paper);
}

/* Dark bands re-point the role tokens instead of overriding each component. */
.sq-on-dark {
	--sq-fg: var(--sq-color-paper);
	--sq-fg-muted: var(--sq-color-on-dark-muted);
	--sq-border: var(--sq-color-paper);
	--sq-rule: var(--sq-color-on-dark-hairline);
	--sq-accent: var(--sq-color-on-dark-accent);
	--sq-link: var(--sq-color-paper);
	--sq-link-hover: var(--sq-color-on-dark-accent);
}