/* Kept Signal token bridge for the Flask-served pages.
 *
 * risacareventures.com is a Caddy path split: the marketing routes come from the
 * redesigned TanStack app, and these hand-written pages come from Flask. They were
 * built before the redesign, so a visitor crossing the seam (nav Log in -> /login,
 * homepage -> /tour, Stripe success -> /start.html, /websites -> /website-onboarding)
 * watched the site change identity mid-journey.
 *
 * Every one of those pages already themes itself through the same handful of CSS
 * variables, so redefining the variables moves the whole page onto the new system
 * without touching a single rule. Include this AFTER the page's own <style>.
 *
 * Values are the live tokens read straight off the TanStack app, not eyeballed, and
 * every text pairing below was measured against WCAG AA before it was written down:
 *   ink on paper 14.56:1 - body on paper 6.58:1 - muted on paper 5.24:1
 *   white on ink 15.09:1 - gold-ink on paper 4.62:1 - ink on brand gold 7.75:1
 *
 * See risacareventures/docs/DESIGN_SYSTEM.md for the rules these values encode.
 */
:root {
  /* Structure. The old --navy/--accent/--green all become one evening blue: in Kept
   * Signal, gold is a POINT and everything structural is ink. The green #2e7d32 that
   * these pages used for primary buttons does not exist in the system at all. */
  --navy: #0c2745;
  --accent: #0c2745;
  --green: #0c2745;
  --green-d: #041c37;

  /* The dense inky field -- what .field-ink paints on the TanStack side (styles.css
   * --ink-deep). Named properly rather than reusing --green-d, which happens to hold the
   * same value only because green was folded into ink. Dark grounds should ask for this. */
  --ink-deep: #041c37;

  /* Text */
  --ink: #4f5c6c;
  --muted: #5f6b79;

  /* Grounds. --bg was cream (#f9f5ec) on website-onboarding; cream is gone. */
  --bg: #fafbfc;
  --soft: #f3f5f6;
  --card: #ffffff;
  --line: #e1e3e5;

  /* The warm point. --gold was already the brand gold, so it stays exactly as-is;
   * --gold-d / --gold-ink move to the darkened gold that passes AA on paper. */
  --gold: #e3b341;
  --gold-d: #a56300;
  --gold-ink: #a56300;

  /* Motion. Same trick as the colours above: custom properties resolve at USE time, so
   * rules in each page's own <style> can say var(--ease-out) even though they parse
   * before this file loads. Before this block these four pages shared no motion values
   * at all -- 13 hand-typed durations, none of them the curve the TanStack app uses.
   * --ease-out is that exact curve, read off risacareventures/src/styles.css. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 160ms;   /* :active feedback */
  --dur-ui: 180ms;      /* hover, focus, colour */
  --dur-reveal: 320ms;  /* a screen or card arriving */
}

/* Rounded, not pill: 10px, the same radius the TanStack app uses. Scoped to the
 * things that are actually buttons so avatars and chips keep their own shapes. */
.btn,
button.btn,
a.btn,
input[type="submit"] {
  border-radius: 0.625rem;
}

/* Keyboard focus must be visible on the light ground these pages use. Gold measures
 * 1.7:1 on paper, so ink is the ring here, matching the redesigned app. */
:focus-visible {
  outline: 2px solid #0c2745;
  outline-offset: 2px;
}