/* =====================================================================
   CRAFT & EFFECT — TOKENS
   The only file allowed to contain a raw hex value. Everything else
   references a semantic token. Source: design-system/craft-and-effect/MASTER.md
   ===================================================================== */

/* --- Fonts. All self-hosted WOFF2, latin subset only. No CDN, no
       render-blocking stylesheet, no third-party connection. ------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Palette (brand board v1.3) ---------------------------------- */
  --ink:       #1B1A17;
  --graphite:  #6B6560;
  --steel:     #A3A3A3;
  --orange:    #EF4510;
  --orange-hi: #C6390D;  /* hover — orange darkened 12% */
  --orange-lo: #EFB19A;  /* disabled */
  --ember:     #B8480A;  /* reserved: see MASTER §2.2 */
  --paper:     #F9F8F6;
  --card:      #F6F3EC;  /* unused since the countdown screen was retired */

  /* --- Semantic roles. Components use THESE, never the palette. ----- */
  --bg-intro:        var(--paper);
  --bg-orange:       var(--orange);
  --text-primary:    var(--ink);
  --text-secondary:  var(--graphite);
  --text-on-orange:  var(--ink);    /* 4.58:1 — see MASTER §2.2 */
  --text-on-ink:     var(--paper);  /* 16.4:1 */
  --accent:          var(--orange);
  --rule-on-orange:  rgba(249, 248, 246, 0.55);

  /* Phase 2. The lead-form screen is the one light ground BELOW the intro,
     and the card on it is the only pure white in the system — alabaster on
     alabaster would make the card disappear. */
  --bg-light:        var(--paper);
  --surface-card:    #FFFFFF;
  --rule-card:       rgba(27, 26, 23, 0.14);
  --field-fill:      var(--paper);

  /* Filled CTA — brand board v1.3 §05 Interactive. The alabaster label on
     brand orange measures 3.58:1, which is BELOW AA for a 16px semibold
     label (WCAG's 3:1 large-text allowance needs 18.66px bold or 24px
     regular). Ruled 2026-10-12: the board governs, and the exception is
     recorded in MASTER §2.2 with the measured figure rather than silently
     carried. Hover is 4.96:1; disabled controls are exempt from 1.4.3. */
  --btn-fill:          var(--orange);      /* label 3.58:1  — documented exception */
  --btn-fill-hover:    var(--orange-hi);   /* label 4.96:1  — AA */
  --btn-fill-disabled: var(--orange-lo);   /* label 3.13:1  — exempt */
  --btn-label:         var(--paper);
  --btn-label-disabled: var(--graphite);
  --btn-radius:        5px;

  /* The spine. */
  --spine:           var(--paper);
  --spine-w:         2px;

  /* The signal card, on the orange field. Ember rather than brand orange
     for the name: #EF4510 on alabaster is 3.58:1 and fails AA at 17px,
     ember is 4.98:1. Swap --text-signal-name to var(--accent) to take the
     mockup's exact colour and the 3.58:1 with it. */
  --surface-signal:    var(--paper);
  --text-signal-name:  var(--ember);   /* 4.98:1 */

  /* --- Phase 3: the Endearment Score ---------------------------------
     The temperature ramp, Cold Open through Hearthside. A tonal walk from
     the neutral ground to brand orange, so a band reads as a temperature
     before anyone reads its name. Used by the results screen and, as a
     rasterised ring, by the email.

     Two tones per band. The frame is a 10px stroke and carries the pastel
     happily; the tick dial is 2px, where a pastel yellow at 1.5:1 on
     alabaster disappears outright. Yellow cannot reach 3:1 and stay yellow,
     so the hue is deepened rather than the band being abandoned.

     The cold half is deeper than a true pastel for a different reason: a
     pale yellow or orange still reads as colour, but a pale grey blue just
     reads as absent, and the frame is the ring's defining edge. Measured
     against alabaster: */
  --band-cold:         #6E8296;  /* gray blue      3.74:1 */
  --band-cold-ink:     #5C7084;  /*                4.57:1 */
  --band-room:         #918B83;  /* steel gray     3.18:1 */
  --band-room-ink:     #7C766F;  /*                4.23:1 */
  --band-warming:      #E8C96B;  /* pastel yellow  1.52:1 */
  --band-warming-ink:  #A8801A;  /*                3.43:1 */
  --band-welcome:      #F0A571;  /* pastel orange  1.92:1 */
  --band-welcome-ink:  #C9611F;  /*                3.80:1 */
  --band-hearth:       #EF4510;  /* brand orange   3.58:1 */
  --band-hearth-ink:   #EF4510;

  /* The score ring. Each part has one job: the frame is the brand, the
     dial is the 0-100 scale, the arcs are the Four Signals. See
     assets/score-ring.js. */
  --ring-frame:    var(--orange);   /* overridden per band by score-ring.js */
  --ring-groove:   rgba(27, 26, 23, 0.05);
  --ring-tick:     rgba(27, 26, 23, 0.15);
  --ring-tick-lit: var(--orange);
  --ring-arc:      var(--orange);
  --ring-focus:    var(--ink);

  /* The kindling mark beside the lead form's heading. Its flame is a
     vertical gradient from brand orange to a warmer one; this is the only
     place that second orange is used, and the sticks take currentColor so
     they follow whatever ink the heading is set in. */
  --flame-lo:  #FF5C00;

  /* --- Type ---------------------------------------------------------- */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-text:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display:   clamp(1.85rem, 3.55vw, 3.1rem);   /* section headings */
  --fs-lede:      clamp(1rem, 1.4vw, 1.1875rem);
  --fs-signal-name: 1.0625rem;
  --fs-signal:      clamp(1rem, 1.3vw, 1.125rem);
  --fs-tagline:   clamp(0.82rem, 1.6vw, 1.05rem);
  --fs-body:      1rem;
  --fs-label:     0.75rem;

  --track-label:  0.32em;

  /* --- Motion (MASTER §4) -------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-mid:   320ms;
  --dur-slow:  620ms;

  /* --- Space --------------------------------------------------------- */
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --tap:       44px;   /* minimum touch target */
  --cta-w:     13rem;  /* the footer credit wordmark */
}

/* The signal cards carry more weight on a wide screen, where they are two
   columns hanging off the spine rather than one stacked run. Deliberately
   bounded to the pointer layout's own breakpoint: the touch sizes are
   unchanged. */
@media (min-width: 861px) {
  :root {
    --fs-signal-name: 1.5rem;     /* 24px */
    --fs-signal:      1.125rem;   /* 18px */
  }
}