/* Design tokens, extracted from the approved prototype.
 *
 * The prototype is inline-styled throughout and imports a design system it
 * then overrides, so these values come from the page rather than from that
 * system. This file is the only place they are written down.
 *
 * Custom properties only — no element rules. Everything declared here is
 * unlayered, and an unlayered declaration beats every declaration in every
 * `@layer` regardless of specificity or source order. An element rule
 * written here (`a { color: ... }`, `body`, etc.) would therefore be
 * unbeatable by any Tailwind utility. Element-level rules and reusable
 * classes live in apps/site/static_src/site.css instead, inside `@layer
 * base` / `@layer components`, where the normal cascade governs them.
 */

:root {
  /* Surfaces and text */
  --rg-ink: #1E2328;
  --rg-ink-deep: #12161A;
  --rg-page: #F7F8FA;
  --rg-muted: #6D6E71;
  /* Body copy — a step darker than --rg-muted, for prose rather than
   * labels. 10.4:1 on the page.
   */
  --rg-body: #3D3B3B;
  --rg-muted-soft: #9AA0A6;
  --rg-border: #DFE3E8;
  --rg-tint: #EEF1F4;

  /* Text and rules on the ink surfaces — the summary rail, the availability
   * strip, the header. Written as alpha over ink rather than as flat greys
   * because that is what the prototype does and what reads correctly over
   * the rail's photograph. The two softer steps are the floor: 0.55 white
   * on --rg-ink is 5.6:1, and anything lighter fails AA for body text.
   */
  --rg-on-dark: #ffffff;
  --rg-on-dark-mid: rgb(255 255 255 / 0.7);
  --rg-on-dark-soft: rgb(255 255 255 / 0.55);
  --rg-rule-on-dark: rgb(255 255 255 / 0.18);
  --rg-rule-on-dark-strong: rgb(255 255 255 / 0.35);

  /* Brand */
  --rg-red: #CF232C;
  /* The pale red the prototype paints the too-close end of the
   * viewing-distance track with. A surface tint, never a text colour: it is
   * far too light to carry type.
   */
  --rg-red-wash: #F3C7C4;
  --rg-magenta: #E01B6A;
  --rg-pink: #FF4D8E;
  --rg-gradient: linear-gradient(60deg, #CF232C, #E01B6A, #FF4D8E);
  /* Two stops, not three. The three-stop gradient is for gradient *text*;
   * a call to action fills a box with it and puts white on top, and white
   * on #FF4D8E is 3.1:1. Stopping at the magenta keeps the worst point of
   * the fill at 4.6:1, which is what the prototype's own buttons do.
   */
  --rg-gradient-cta: linear-gradient(60deg, #CF232C, #E01B6A);
  --rg-glow: 0 10px 30px rgb(224 27 106 / 0.35);
  --rg-glow-strong: 0 8px 28px rgb(224 27 106 / 0.5);
  --rg-link: #CF232C;
  --rg-link-hover: #B32028;

  /* Type */
  --rg-font-display: "Inter Tight", system-ui, sans-serif;
  --rg-font-text: Outfit, system-ui, sans-serif;

  /* Geometry. Zero radius is deliberate and central to the identity, but is
   * enforced in the Tailwind theme (--radius-* in static_src/site.css) and
   * verified against the built stylesheet by
   * test_no_non_zero_border_radius_reaches_the_built_stylesheet — nothing
   * reads a token for it, so no token is declared here.
   */
  --rg-content-width: 1240px;
  --rg-content-pad: 40px;
  --rg-header-height: 70px;
}

/* The mockup's header is one 70px row of six items, all of them
 * `white-space: nowrap`. That row does not fit a viewport narrower than
 * 878px, and every page scrolled sideways below it. `.rg-header__inner` in
 * site.css collapses it to two rows below 940px — see the comment there for
 * what goes on which row, and for why the threshold is 940 and not 878 —
 * and this is the height those two rows add up to.
 *
 * It lives here, and not in site.css, because everything that pins itself
 * under the header reads this token (`.rg-steps`, `.rg-summary`), and a
 * custom property declared inside an `@layer` would lose to the unlayered
 * `:root` above regardless of source order. Asserted against the rendered
 * header at every width from 320 to 1440 by tests/e2e/marketing.spec.ts.
 */
@media (max-width: 940px) {
  :root {
    --rg-header-height: 104px;
  }
}