/* ElysiOS legal documents (privacy, terms, refunds, sms-consent, support).
   A-042 / DESIGN-AUDIT §3.7: these pages were white background, system font and default blue links —
   "a hard cut from a dark gold site to a different product". COPY-REWRITE §8.9 fixes the frame only:
   the site header, the site's tokens and Fraunces headings; the document copy is counsel-owned and
   unchanged.

   The :root block below is a MIRROR of src/styles/tokens.css, copied verbatim between the markers.
   A static document cannot import the Tailwind build (its stylesheet is hash-named), so this file is
   the one place the values are repeated — and src/test/LegalBrandTokens.test.ts compares the two
   blocks byte for byte, so editing a token without mirroring it here fails CI. */

/* TOKENS:BEGIN */
:root {
  /* surfaces — DESIGN-AUDIT §6.1: Ink page, Ink-2 / surface / raised. Layers, not borders,
     separate content. --bg-sunken is the one derived value (a step below Ink) that the site's
     sunken section rhythm needs; §6.1 names no layer darker than the page. */
  --bg: #0b0b0c;
  --bg-sunken: #08080a;
  --surface-1: #111110;
  --surface-2: #171613;
  --surface-3: #1f1d19;
  /* One hairline weight site-wide (§6.1). */
  --hairline: rgba(236, 220, 190, 0.12);
  --line-strong: rgba(236, 220, 190, 0.22);
  /* Control boundary: 3.09:1 on --bg, so a field or secondary button edge stays perceivable
     (WCAG 1.4.11 non-text contrast). */
  --line-control: rgba(236, 220, 190, 0.4);

  /* text — §6.1. Secondary raised from #b7ad9b to #c7bdab for contrast on surfaces; tertiary is
     for captions and metadata only, never body. */
  --text: #f4efe5;
  --text-2: #c7bdab;
  --text-3: #968c7b;

  /* gold — §6.1: one gold, #e6c67d, solid on the one primary button per view, headline accents and
     thin rules; never a 13 % wash as a button. --gold-bright is an alias of the same value: the
     site's utilities address gold by two role names, and the audit's complaint was four golds. */
  --gold: #e6c67d;
  --gold-bright: var(--gold);
  --gold-deep: #b8904a;
  --gold-ink: #17130b; /* text on gold — §6.1 */
  --gold-wash: rgba(230, 198, 125, 0.13);
  --gold-line: rgba(230, 198, 125, 0.31);
  --gold-line-soft: rgba(230, 198, 125, 0.1);
  --gold-glow: rgba(230, 198, 125, 0.26); /* never on a button (§6.4); live indicators only */

  /* paper — §6.1: one light section per long page (the comparison, the "Yours" controls, legal
     pages). The invitation book's ivory palette, brought onto the site. */
  --paper: #f3eee5;
  --paper-2: #e9e2d5;
  --paper-text: #1b1914;
  --paper-muted: #5f574a;
  --paper-accent: #8a6a2c;
  --paper-line: rgba(27, 25, 20, 0.3);

  /* legacy companion names, kept for surfaces already written against them */
  --ivory: var(--paper);
  --ink: var(--paper-text);
  --ink-soft: var(--paper-muted);
  --stone: #6e675b;
  --platinum: #9a948b;
  --ivory-line: #b9b2a4;

  /* status — harmonized with the warm palette */
  --ok: #9fc79a;        --ok-wash: rgba(159, 199, 154, 0.12);
  --warn: #e0913c;     --warn-wash: rgba(224, 145, 60, 0.12);
  --danger: #d86a5b;   --danger-wash: rgba(216, 106, 91, 0.12);

  /* radius */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* controls — §6.4 (52 px primary, 44 px on a phone) and D-U1's tap rule: no interactive control
     under 44 px at 390 px. */
  --control-height: 52px;
  --control-height-phone: 44px;
  --field-height: 54px; /* §6.4 forms: 54 px fields on surface */
  --tap-min: 44px;

  /* layout — §6.3: content width 1200 px, 1360 px for full-bleed hero content, gutters 40/22,
     section rhythm 150–180 px desktop and 90–110 px phone. */
  --wrap: 1200px;
  --wrap-bleed: 1360px;
  --gutter: 40px;
  --gutter-phone: 22px;
  --section-pad-block: clamp(5.625rem, 4rem + 6vw, 10.5rem);

  /* elevation — warm, soft, layered */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.34);
  --glow-live: 0 0 0 1px var(--gold-line), 0 0 2px rgba(230, 198, 125, 0.28), 0 0 28px var(--gold-glow);
}
/* TOKENS:END */

/* SITE-CONTRAST:BEGIN */
:root {
  --paper-accent: #785b23;
}
/* SITE-CONTRAST:END */

/* The documents are the site's one light section (§6.1), under the site's dark header. */
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--paper-text);
  font: 400 16px/1.65 "Inter Variable", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.document { max-width: 44rem; margin: 0 auto; padding: 3rem var(--gutter-phone) 6rem; }
@media (min-width: 640px) { .document { padding: 4rem var(--gutter) 7rem; } }

h1, h2, h3 { font-family: "Fraunces Variable", Fraunces, Georgia, serif; font-weight: 380; letter-spacing: -0.018em; }
h1 { font-size: 2.5rem; line-height: 1.06; margin: 0 0 0.5rem; }
@media (min-width: 640px) { h1 { font-size: 3.25rem; } }
h2 { font-size: 1.5rem; line-height: 1.15; margin: 2.5rem 0 0.6rem; }
h3 { font-size: 1.185rem; line-height: 1.2; margin: 1.75rem 0 0.4rem; }
p, ul, ol { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
code { background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--paper-line); margin: 2.5rem 0; }

/* Ink links with a gold-brown rule; the site-only accent clears AA on both paper tones. */
a { color: var(--paper-text); text-decoration: underline; text-decoration-color: var(--paper-accent); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--paper-accent); }
:focus-visible { outline: 3px solid var(--paper-accent); outline-offset: 3px; }

.meta { color: var(--paper-muted); font-size: 0.9rem; margin-bottom: 2rem; }
.fine { color: var(--paper-muted); font-size: 0.9rem; }
.status { min-height: 1.7rem; font-weight: 650; }

/* Site chrome: the header is the site's own dark band, so the document reads as part of elysios.ai. */
.site-header { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--hairline); }
.site-header__row {
  max-width: var(--wrap); margin: 0 auto; padding: 0.875rem var(--gutter-phone);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
}
@media (min-width: 640px) { .site-header__row { padding: 0.875rem var(--gutter); } }
.site-header a { color: var(--gold); text-decoration: none; display: inline-flex; min-height: var(--tap-min); align-items: center; }
.site-header a:hover, .site-header a:focus-visible { color: var(--text); text-decoration: underline; }
.wordmark { font-family: "Fraunces Variable", Fraunces, Georgia, serif; font-size: 1.25rem; letter-spacing: 0.01em; color: var(--gold); }
.wordmark b { color: var(--text); font-weight: 400; }
.site-header__brand { display: inline-flex; align-items: center; gap: 0.625rem; margin-right: auto; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.8125rem; }
.site-footer { background: var(--bg); color: var(--text-3); border-top: 1px solid var(--hairline); font-size: 0.8125rem; }
.site-footer__row { max-width: var(--wrap); margin: 0 auto; padding: 2rem var(--gutter-phone); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
@media (min-width: 640px) { .site-footer__row { padding: 2rem var(--gutter); } }
.site-footer a { color: var(--gold); text-decoration: none; display: inline-flex; min-height: var(--tap-min); align-items: center; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; }

/* The support form keeps the document's own measure; controls follow §6.4. */
form { margin-top: 2rem; display: grid; gap: 1rem; }
label { display: grid; gap: 0.4rem; font-weight: 650; }
input, textarea, button, select {
  box-sizing: border-box; width: 100%; border: 1px solid var(--paper-line); border-radius: 0.65rem;
  padding: 0.8rem 0.9rem; font: inherit; color: inherit; background: var(--paper); min-height: var(--field-height);
}
textarea { min-height: 7rem; resize: vertical; }
button {
  min-height: var(--control-height); border: 0; border-radius: var(--r-pill); background: var(--gold);
  color: var(--gold-ink); font-weight: 600; cursor: pointer; padding: 0 1.75rem; width: auto;
  justify-self: start;
}
button[disabled] { cursor: wait; opacity: 0.65; }
.consent { grid-template-columns: 1.25rem 1fr; align-items: start; font-weight: 400; }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; min-height: 0; }
.consent span { display: block; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }