/**
 * Design tokens — the single source of truth for the redesign.
 *
 * Colours come from the client's Figma. The brand navy was sampled from the
 * supplied logo PNG (#1E3A8A, 99.7% of its opaque pixels) and is exactly
 * Tailwind blue-900, so the rest of the scale was picked to match that family.
 *
 * Nothing outside this file should hardcode a colour, font or spacing step.
 */

:root {
	/* ---------------------------------------------------------- colour */
	--sc-navy:             #1e3a8a;
	--sc-navy-dark:        #172f6f;
	--sc-navy-tint:        #dbeafe;
	/* Deeper navy the client specified for headings (2026-07-28). */
	--sc-navy-deep:        #172a63;

	--sc-green:            #2e7d51;
	--sc-green-dark:       #256641;
	/* Eyebrow / label green. Exact value supplied by the client from the Figma
	   on 2026-07-30 — it replaces #2f7d4e, which had been estimated from a
	   design screenshot. Shared by the homepage eyebrows and topic-card labels,
	   the Buyer's Guide "QUESTION n" / "Consider:" lines and the Reviews page,
	   so the site has one green for text. */
	--sc-green-text:       #2f7a5f;

	--sc-orange:           #e2711d;
	--sc-orange-dark:      #c65f14;

	/* Heading underline bar. 8-digit hex from the client: #D4A017 at 40% alpha. */
	--sc-gold:             #d4a01766;
	/* Same gold at full strength — the decorative arc on the Buyer's Guide hero. */
	--sc-gold-solid:       #d4a017;

	--sc-text:             #1f2937;
	--sc-text-body:        #4b5563;
	--sc-text-muted:       #6b7280;
	--sc-text-invert:      #ffffff;
	/* True black. Only where the client has asked for black specifically —
	   --sc-text is the default dark for body copy and headings. */
	--sc-text-black:       #000000;

	--sc-surface:          #ffffff;
	--sc-surface-cream:    #fdf8ef;   /* hero */
	--sc-surface-blue:     #f4f8fd;   /* alternating sections */
	/* Cards sit on --sc-surface-blue, so this must stay DARKER than that, or
	   they disappear into the section. Keep the gap small — the design has the
	   card only just readable against the section, not a strong contrast. */
	--sc-surface-soft:     #eef1f6;
	--sc-border:           #e3e8f0;

	/* Comparison table (Reviews & Recommendations). */
	--sc-table-head:       #eef2f8;   /* header row of the comparison table */
	--sc-pip-off:          #dfe5ee;   /* unfilled segment of the score meter */
	/* Filled segment. Exact value supplied by the client (2026-07-30). It is NOT
	   --sc-gold-solid (#d4a017), which read as a dull mustard against the design;
	   gold-solid still draws the affiliate disclosure border, so the two are
	   deliberately separate tokens. */
	--sc-pip-on:           #ffb900;
	--sc-amber-bg:         #fef3c7;   /* "Best Overall" award pill */
	--sc-amber-soft:       #fdf8e8;   /* affiliate disclosure box */
	--sc-amber-text:       #92400e;
	--sc-green-check:      #2e9e63;   /* feature ticks */

	--sc-focus:            #2f6fd0;

	/* ------------------------------------------------------ typography */
	--sc-font-body:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sc-font-heading:     "Source Serif 4", Georgia, "Times New Roman", serif;

	/*
	 * Sizes are in PIXELS, deliberately — not rem.
	 * The BuddyBoss parent sets html { font-size: 14px }, so every rem value
	 * silently rendered 12.5% smaller than the design (a 56px headline came
	 * out at 49px). The Figma is specified in px anyway. Do not convert these
	 * back to rem while the parent theme is in play.
	 */
	--sc-fs-eyebrow:       13px;   /* uppercase, tracked */
	--sc-fs-xs:            14px;
	--sc-fs-sm:            15px;
	--sc-fs-base:          16px;
	--sc-fs-lg:            18px;
	--sc-fs-xl:            20px;
	--sc-fs-2xl:           26px;
	--sc-fs-3xl:           34px;   /* section headings */
	--sc-fs-4xl:           56px;   /* hero headline */

	--sc-lh-tight:         1.2;
	--sc-lh-heading:       1.3;
	--sc-lh-normal:        1.7;

	--sc-fw-regular:       400;
	--sc-fw-medium:        500;
	--sc-fw-semibold:      600;
	--sc-fw-bold:          700;

	--sc-track-eyebrow:    0.08em;

	/* --------------------------------------------------------- spacing */
	/* Pixels, for the same reason as the type scale above. */
	--sc-space-1:          4px;
	--sc-space-2:          8px;
	--sc-space-3:          12px;
	--sc-space-4:          16px;
	--sc-space-5:          24px;
	--sc-space-6:          32px;
	--sc-space-7:          48px;
	--sc-space-8:          64px;
	--sc-space-9:          96px;

	/* ---------------------------------------------------------- layout */
	/* Matches the header/footer shell: 1240 - 2x32 = 1176px of content,
	   i.e. the design's 132px side margins on a 1440 frame. */
	--sc-container:        1240px;
	--sc-gutter:           32px;

	--sc-radius-sm:        8px;
	--sc-radius:           12px;
	--sc-radius-lg:        16px;
	--sc-radius-pill:      999px;

	--sc-shadow-sm:        0 1px 2px rgba(16, 26, 23, 0.05);
	--sc-shadow:           0 8px 24px rgba(30, 58, 138, 0.08);

	--sc-transition:       180ms ease;
}

/*
 * Breakpoints are documented here but must be written out literally in media
 * queries — custom properties cannot be used in a media query condition.
 *
 *   mobile   up to  575px
 *   sm       576px
 *   md       768px   <- tablet QA target
 *   lg      1024px   <- laptop QA target
 *   xl      1240px   <- container width
 *   2xl     1440px   <- Figma frame width
 */