/* ═══════════════════════════════════════════════════════════════════
 * hp-tokens.css — the single definition of the visual system
 * Release 20, stage B. Loads FIRST, before every other stylesheet.
 *
 * ─────────────────────────────────────────────────────────────────
 * THIS FILE CHANGES NOTHING ON ITS OWN. THAT IS DELIBERATE.
 *
 * It contains no selectors except :root, so it cannot alter a single
 * pixel. Every token below is NEW, under the `--h-` prefix. Nothing
 * here overwrites --hp-navy, --hp-radius-lg, --cream or any other
 * existing variable.
 *
 * That restraint is the whole point of shipping it first. The old
 * variables are contradictory — see the inventory at the bottom of
 * this file — and redefining them in one go would change the site
 * everywhere at once, with no way to tell an intended change from an
 * accident. Instead: land the vocabulary, verify nothing moved, then
 * migrate components onto it one at a time, each with its own check.
 *
 * When a component has fully moved to --h- tokens, the old variables
 * it used can be deleted. The last file to lose them wins the right
 * to delete the definitions.
 *
 * ─────────────────────────────────────────────────────────────────
 * WHERE THE VALUES COME FROM
 *
 * Measured from the existing stylesheets, not invented. Where the
 * codebase disagreed with itself, the conflict and the reason for the
 * choice are recorded inline. Nothing is a matter of taste that could
 * have been a matter of record.
 * ═══════════════════════════════════════════════════════════════════ */

:root{

  /* ── Brand colour ────────────────────────────────────────────────
   *
   * NAVY: the codebase holds two values and they are not the same
   * colour. #07142e appears in main.css:773 and premium-v2.css;
   * #08133c appears in main.css:1221, v3-sprint11 and v3-sprint4.
   * Because v3-sprint11 loads last, #08133c currently wins sitewide.
   *
   * Keeping #07142e. It is the value in <meta name="theme-color">,
   * so today the browser chrome and the page disagree; and it is the
   * darker, less blue of the two, which is what the RE/MAX lockup and
   * the night skyline hero were composed against. #08133c winning was
   * an accident of load order, never a decision.
   *
   * INK vs NAVY: worth knowing before touching text colour. --hp-ink
   * is #10182d in main.css:778, #10172f at main.css:1224, and #07142e
   * in v3-sprint11 — where it holds the NAVY value. The two tokens
   * have swapped meaning depending on which sheet you read. Below
   * they are separate and stay separate. */
  --h-navy:        #07142e;
  --h-navy-deep:   #050d1f;   /* headers over imagery, footer ground */
  --h-blue:        #0e2885;
  --h-purple:      #883c97;
  --h-orange:      #f95e28;   /* the one value every sheet agreed on */
  --h-orange-deep: #e94a14;
  --h-gold:        #c8a35a;

  /* Neutrals, warmed very slightly toward the cream so they read as
     chosen rather than inherited from a default grey ramp. */
  --h-cream:       #f0e9e0;
  --h-paper:       #fbf8f3;
  --h-white:       #ffffff;
  --h-ink:         #11182a;   /* body text. NOT the navy. */
  --h-muted:       #667084;
  --h-line:        rgba(7,20,46,.13);
  --h-line-strong: rgba(7,20,46,.24);
  --h-surface:     #f7f8fb;

  /* Semantic. Kept apart from the brand accent on purpose: orange is
     the brand, not a warning, and a page that uses one colour for both
     cannot signal state. */
  --h-ok:          #2f7d5d;
  --h-warn:        #b4762a;
  --h-crit:        #b23a2a;

  /* ── Type ────────────────────────────────────────────────────────
   *
   * Rigton and Etna are already preloaded on every page. They are then
   * bypassed by 29 hardcoded `Georgia,serif` declarations against only
   * 10 uses of a font variable — so the brand faces are paid for on
   * every request and largely not used.
   *
   * Compounding it, the same .woff files are registered TWICE under
   * different family names: 'Rigton'/'Etna' in one sheet, and
   * HPDisplay/HPEditorial/HPText in another. The browser has no way to
   * know they are the same font.
   *
   * These tokens name 'Rigton' and 'Etna' — the names that match the
   * files. The HP* aliases are retired when the last component using
   * them migrates. Georgia stays, correctly, as the fallback. */
  --h-font-display:   'Rigton', Georgia, 'Times New Roman', serif;
  --h-font-editorial: 'Etna', Georgia, serif;          /* italic accent */
  --h-font-body:      'Rigton', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* A scale, so sizes stop being picked per component. Clamped values
     keep the existing responsive feel rather than imposing a new one. */
  --h-step--1: 0.8125rem;
  --h-step-0:  1rem;
  --h-step-1:  1.125rem;
  --h-step-2:  clamp(1.3rem,  1.6vw, 1.55rem);
  --h-step-3:  clamp(1.6rem,  2.2vw, 2.05rem);
  --h-step-4:  clamp(2.1rem,  3.4vw, 3.1rem);
  --h-step-5:  clamp(2.7rem,  4.6vw, 4.4rem);
  --h-step-6:  clamp(3.2rem,  6vw,   5.6rem);

  --h-lh-tight:  1.06;
  --h-lh-snug:   1.25;
  --h-lh-normal: 1.55;
  --h-tracking-tight: -.022em;
  --h-tracking-label:  .14em;

  /* ── Space ───────────────────────────────────────────────────────
   *
   * One 4px-based scale. Section padding, gutters, heading margins,
   * paragraph rhythm, card padding, grid gaps and form spacing all
   * draw from it, so vertical rhythm stops being negotiated file by
   * file. */
  --h-s1:  4px;
  --h-s2:  8px;
  --h-s3:  12px;
  --h-s4:  16px;
  --h-s5:  24px;
  --h-s6:  32px;
  --h-s7:  48px;
  --h-s8:  64px;
  --h-s9:  96px;
  --h-s10: 128px;

  --h-section-y:  var(--h-s9);   /* desktop section padding */
  --h-gutter:     var(--h-s5);
  --h-card-pad:   var(--h-s5);
  --h-grid-gap:   var(--h-s5);
  --h-field-gap:  var(--h-s4);
  --h-heading-mb: var(--h-s4);
  --h-para-mb:    var(--h-s4);

  /* ── Form ────────────────────────────────────────────────────────
   *
   * RADII: the site currently uses twenty distinct values — 6, 7, 8,
   * 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26px, plus
   * 999px and 50%. Adjacent cards differ by a pixel, which reads as
   * carelessness rather than variety. Four values; every existing one
   * maps onto the nearest.
   *
   * SHADOWS: 142 unique box-shadow declarations, most of them
   * near-duplicates. Three elevations plus a focus ring. This is the
   * single biggest reason cards on different pages look like they came
   * from different websites. */
  --h-r-xs:   4px;
  --h-r-sm:  10px;
  --h-r-lg:  18px;
  --h-r-pill: 999px;
  --h-r-circle: 50%;

  --h-e1: 0 1px 2px rgba(7,20,46,.06), 0 2px 8px rgba(7,20,46,.05);
  --h-e2: 0 4px 12px rgba(7,20,46,.08), 0 12px 32px rgba(7,20,46,.08);
  --h-e3: 0 12px 28px rgba(7,20,46,.12), 0 32px 72px rgba(7,20,46,.14);
  --h-ring: 0 0 0 3px rgba(249,94,40,.42);

  --h-border:  1px solid var(--h-line);
  --h-border-strong: 1px solid var(--h-line-strong);

  /* Gradients, kept because the brand uses them — but as three named
     values rather than redeclared per component. */
  --h-grad-primary: linear-gradient(125deg,#0e2885 0%,#883c97 58%,#f95e28 118%);
  --h-grad-dark:    linear-gradient(135deg,#07142e 0%,#0e2885 62%,#883c97 125%);
  --h-grad-warm:    linear-gradient(135deg,#f0e9e0 0%,#fff 56%,rgba(249,94,40,.10) 100%);

  /* ── Motion ──────────────────────────────────────────────────────
   *
   * Nine different durations are in use (.15 .18 .2 .25 .28 .3 .35
   * .38 .7s), which is why hover states feel inconsistent between
   * neighbouring components. Two durations and one easing curve.
   * The curve is the one already in r6-cinematic.css. */
  --h-t-fast: .15s;
  --h-t:      .25s;
  --h-ease:   cubic-bezier(.22,1,.36,1);

  /* ── Layout ──────────────────────────────────────────────────────
   *
   * Container widths currently include 620, 650, 680, 700, 720, 760,
   * 860, 900, 1050, 1080, 1100 and 1340px, chosen per file, so
   * sections do not align to a shared measure down the page.
   *
   * --h-w-text is 68ch-ish at body size: long-form copy stays inside
   * a comfortable measure instead of running the full container. */
  --h-w-text:    680px;
  --h-w-content: 1080px;
  --h-w-wide:    1280px;
  --h-w-max:     1340px;   /* matches .container in main.css today */

  /* Breakpoints. Custom properties cannot be used inside a media
     query — these are the documented values to type by hand, so the
     three that matter are recorded in one place instead of the
     fourteen currently in use (520 560 620 640 650 680 700 720 760
     860 900 1050 1080 1100). */
  --h-bp-sm:  640px;
  --h-bp-md:  900px;
  --h-bp-lg: 1200px;
}

/* Tablet and below: sections tighten. Only the derived spacing tokens
   change, so every component that uses them adapts at once and none
   of them has to carry its own media query for padding. */
@media (max-width: 900px){
  :root{
    --h-section-y: var(--h-s7);
    --h-gutter:    var(--h-s4);
    --h-card-pad:  var(--h-s4);
    --h-grid-gap:  var(--h-s4);
  }
}

@media (max-width: 640px){
  :root{
    --h-section-y: var(--h-s6);
    --h-gutter:    var(--h-s4);
    --h-grid-gap:  var(--h-s3);
  }
}

/* Respect the setting. Anything that opts into motion should read this
   rather than each component deciding for itself. */
@media (prefers-reduced-motion: reduce){
  :root{
    --h-t-fast: 0.01ms;
    --h-t:      0.01ms;
  }
}