/* ============================================================
   Design tokens — the single source of truth for the whole site.

   Loaded by index.html and, via templates/partials.js, by every
   generated listing page. Before this file existed the token block
   was transcribed by hand into two places and had to be kept in
   sync manually. It no longer does: change a value here and both
   the homepage and the listing pages move together.

   Two groups live below. The scale primitives (space, text, gray,
   radius, shadow) are the vocabulary for new work. The brand block
   under them holds the values that carry this specific site's
   identity and have no equivalent in a generic scale.
============================================================ */

:root {
  /* ── Spacing ── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 16px;
  --space-4: 24px; --space-5: 40px;  --space-6: 64px;
  --space-7: 96px;

  /* ── Type ──
     Headings keep their fluid clamp() sizes at the point of use.
     A fixed step cannot express type that scales with the viewport,
     and losing that would break the mobile layout of every h1. */
  --text-sm: 14px; --text-base: 16px;
  --text-lg: 24px; --text-xl: 40px;

  /* Added for the listing pages: --text-xs is the label and eyebrow
     size, --text-heading the section signpost. Nothing on the
     homepage references these, so its type is unchanged. */
  --text-xs: 11px;
  --text-heading: 22px;

  /* ── Neutral ramp ──
     Available for new work. The brand neutrals below are close
     cousins but not identical, and existing surfaces stay on the
     brand values so nothing shifts. */
  --gray-900: #111; --gray-600: #555; --gray-400: #999;
  --gray-200: #e5e5e5; --gray-50: #fafafa; --white: #fff;

  /* ── Accent ──
     Brand-locked. The token spec proposed #2563eb; this site is
     John L. Scott co-branded and its green is not a design
     preference, so the blue is deliberately not adopted. Green
     appears only on call CTAs, the step markers, and the "sold
     every 4 days" line — it means something because it is rare. */
  --accent: #0F6342;

  /* ── Radius ──
     --radius is the spec's 8px. Cards and panels sit at 12px and
     pills need a full round, so both get a named companion rather
     than being rounded down to the one step. */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ── Shadow ──
     --shadow is the spec's hairline. The existing lifted shadow on
     cards and the sticky form panel is a different effect, not a
     different value of the same one, so it keeps its own name. */
  --shadow: 0 1px 3px rgba(0,0,0,.1);
  --shadow-lift: 0 16px 32px rgba(23, 23, 23, 0.08);

  /* ── Brand palette ──
     No equivalents in the gray ramp. --charcoal is for dark section
     panels only, kept apart from --ink so body text stays
     full-strength while the big dark bands sit softer. --line is
     alpha on purpose so it works over cream and white alike. */
  --ink: #171717;
  --charcoal: #1E1E21;
  --cream: #F7F7F5;
  --slate: #6B7280;
  --line: rgba(23, 23, 23, 0.12);
  --star: #E0A526;

  /* Softened black rather than grey. --slate is a blue-grey that goes
     washed out against white at body sizes; ink at reduced opacity
     stays in the same family as the headline and reads considered
     instead of faded. Listing pages use these for body copy and
     labels. --slate is untouched, so the homepage is unaffected. */
  --ink-soft: rgba(23, 23, 23, 0.78);
  /* 0.62 is a floor, not a taste call: eyebrows and stat labels are
     11px, and anything lighter than this drops under 4.5:1 on white.
     Low emphasis at this size comes from the tracking and the scale,
     not from fading the ink until it fails. */
  --ink-mute: rgba(23, 23, 23, 0.62);

  /* ── Layout ── */
  --section-y: 96px;
  --container: 1160px;
}

@media (max-width: 820px) {
  :root { --section-y: 64px; }
}