/* web/public/styles/archway-theme.css
   Archway Retirement theme layer, scheme "Pine and light gold". Load AFTER styles/style.css
   and BEFORE a page's own stylesheet, exactly like valoram-theme.css.

   CHOSEN 2026-09-21 (Andrew): "Pine and light gold" is the DEFAULT
   (archway-theme.css, mirrored by the registry and pinned by the tests), with
   the settings of the approved mock (claude.ai/artifact/Y9bMFtJwSTDaaLnuSnjZnU):
   PINE banner, the A lockup centred, the logo in warm CREAM on the pine,
   WHITE page ground, Source Serif 4 over Source Sans 3.
   "Deep two-tone blue" is kept as the alternate in archway-theme-blue.css, built with --theme blue, until the kit is final.
   Both come from ONE template so their component rules are identical and
   only the :root tokens differ. build_archway_bundle.sh --theme <name> ships one of them AS
   styles/archway-theme.css in the bundle, so every surface and the OG cards
   follow whichever scheme is chosen without any other edit. When a scheme is
   picked, copy its file over archway-theme.css and delete the other.

   THIS IS THE ONE FILE for its scheme: every surface reads the :root block
   below, execution/tools/generate_og_cards.py parses the same block, and
   clients/archway.yaml mirrors the default scheme under test.

   PALETTE PROVENANCE: Andrew's logo comparison sheet 2026-09-21, "Pine and light gold": #14402F and #C9A961. NOTE: #C9A961 is the exact Annuity Institute gold (style.css --ai-gold); the identity test in tests/clients/test_archway_tokens.py will say so if this scheme becomes the default.
   Fonts CHOSEN 2026-09-21 with the mock: Source Serif 4 (display) + Source
   Sans 3 (body), the one pairing that collides with neither the Institute
   (Inter) nor Valoram (Montserrat).

   THE ONE CONTRAST TRAP. The accent is a FILL and it takes --ai-on-accent
   text, which on this scheme is the primary colour, NOT white: white on
   #c9a961 measures under 4.5:1. Accent-coloured TEXT on paper uses
   --ai-gold-deep, a darker shade of the accent that clears 4.5:1. Keep the
   split when swapping values. */

:root {
  /* Dark ground (the layout sheet calls it navy; on pine it is the pine) */
  --ai-navy:        #14402f;
  --ai-navy-deep:   #0d2e21;
  --ai-navy-soft:   #1f5a43;

  /* Accent (the layout sheet calls it gold). FILLS take --ai-on-accent text. */
  --ai-gold:        #c9a961;
  --ai-gold-deep:   #7d6429;   /* accent TEXT on paper, 4.5:1 or better */
  --ai-gold-soft:   #f2e8cf;   /* tint for focus rings and soft fills; ALSO the
                                  light ink of the A lockup on the pine banner
                                  (SCHEMES in build_archway_logo_variants.py) */
  --ai-on-accent:   #14402f;     /* text on an accent fill */

  /* Light grounds */
  --ai-cream:       #f6f7f3;
  --ai-cream-deep:  #eceee6;
  --ai-paper:       #ffffff;

  /* Text */
  --ai-text:        #14261d;
  --ai-text-muted:  #4d5a52;
  --ai-text-soft:   #7c877f;
  --ai-text-on-navy: #eef2ea;

  /* Lines. Status colours (error, success) inherit from style.css unchanged. */
  --ai-border:      #d9dccf;
  --ai-border-soft: #e8ebe2;

  /* Type. Chosen 2026-09-21 with the mock. The pages load both from
     fonts.bunny.net; the OG cards and the A lockup use the vendored copies
     in execution/tools/fonts/. */
  --ai-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ai-font-body:    'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ai-radius-sm: 5px;
  --ai-radius-md: 9px;
  --ai-radius-lg: 12px;

  --ai-shadow-sm: 0 1px 2px rgba(20, 64, 47, 0.07);
  --ai-shadow-md: 0 4px 16px rgba(20, 64, 47, 0.10);
  --ai-shadow-lg: 0 12px 32px rgba(20, 64, 47, 0.15);
}

/* --------------------------------------------------------------------------
   Stray literals in landing-page-valoram/styles.css (the shared layout sheet
   the Archway LP also loads) that predate the token system: warm creams and
   navy leftovers. valoram-theme.css carries the same overrides. The quiz
   frame is NOT on this list any more: the approved mock sets the card on
   paper over a white ground, and the frame's own rule already says paper.
   -------------------------------------------------------------------------- */
.ai-v2-quiz-card,
[class*="ai-"][style*="fffaf0"] { background-color: var(--ai-cream); }

/* WHITE page ground (mock setting "Page: White"). style.css paints body
   --ai-cream; on this brand the cream is reserved for the security pill and
   soft fills, so the page itself is paper. */
body[data-brand="archway"] { background: var(--ai-paper); }
/* style.css lays a gold radial (8% accent) over cream on the hero. That wash
   is what made the "white" ground still read warm in review; the mock takes
   it off entirely on a white ground, so the hero is plain paper here too. */
body[data-brand="archway"] .ai-hero { background: var(--ai-paper); }

/* Source Serif 4 has a true italic, so the emphasis span keeps its slant and
   takes the text-safe accent. */
.ai-h1-italic {
  font-style: italic;
  font-weight: 700;
  color: var(--ai-gold-deep);
}
/* Hero headline on phones: the layout sheet floors it at 2.3rem (36.8px),
   which wraps "Turn Your Savings Into Income You Can't Outlive" to FOUR lines
   below about 400px. 2.05rem (32.8px) is the smallest cut that holds three
   lines down to a 360px viewport (measured 2026-09-21; Andrew asked for three). */
@media (max-width: 540px) {
  /* body[data-brand] prefix: this file loads BEFORE the layout sheet, so at
     equal specificity the layout sheet's own mobile rule wins on source order. */
  body[data-brand="archway"] .ai-hero .ai-h1 { font-size: clamp(2.05rem, 8vw, 2.7rem); }
}

/* --------------------------------------------------------------------------
   THE HEADER, as approved 2026-09-21: PINE banner, hairline in the deep
   accent, the A lockup CENTRED. The lockup (images/archway/archway-lockup-a.png,
   built by build_archway_logo_variants.py) already carries the whole name, so
   the header never pairs it with brand-name text. It is rendered at 4x and
   38px tall at 1x; the height here MUST stay 38px or the letters blur.
   -------------------------------------------------------------------------- */
.ai-brand-text { display: none; }
.ai-header {
  background: var(--ai-navy);
  border-bottom: 1px solid var(--ai-gold-deep);
}
.ai-header-inner { justify-content: center; }
.ai-brand-img {
  height: 38px;
  width: auto;
  max-width: none;
  object-fit: contain;
  /* style.css adds a drop shadow "for depth on the navy header"; the lockup
     is flat cream on pine and needs none. */
  filter: none;
}

/* TCPA consent block, injected by landing-page-valoram/pii-polish.js under
   the submit button (the brand name inside it is read from
   AI_SURVEY.BRAND_NAME). 12px floor, 1.5 line height, AA link colour. */
.vs-consent {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ai-text-muted);
  text-align: left;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ai-border-soft);
}
.vs-consent a {
  color: var(--ai-gold-deep);
  text-decoration: underline;
}