/* legal.css — the v347 design system for the standalone document pages.
   ═══════════════════════════════════════════════════════════════════════════════════

   ONE FILE, LINKED BY ALL FIVE, rather than the same block pasted into five inline
   <style> elements. Those pages already carry inlined layout utilities for a good
   reason (they get a strict script-src 'self' CSP, and the Tailwind CDN they once
   used never executed in production — so the pages shipped half-styled). But that
   argument is about SCRIPTS. style-src is 'self' 'unsafe-inline', so a same-origin
   stylesheet loads fine, and five copies of a design system is five things to keep
   in sync and four that will drift.

   WHITE TEXT, NOT GREY. Same rule as the terminal: these are legal documents, read
   at length, and a body colour chosen to look tasteful is a body colour nobody
   finishes reading. The measured contrast of every tier is noted beside it.

   Loaded AFTER each page's inline <style>, so these declarations win on the
   properties they name and leave that page's layout utilities alone. */

:root {
  --lg-bg:        #08080c;
  --lg-card:      #14141d;
  --lg-card-2:    #191926;
  --lg-raise:     #101018;
  --lg-line:      #262633;
  --lg-line-soft: #1d1d28;
  --lg-violet:    #a855f7;
  --lg-r-lg: 18px;
  --lg-r-md: 12px;
}

body {
  background:
    radial-gradient(1200px 460px at 50% -14%, rgba(124, 58, 237, 0.16), transparent 62%),
    var(--lg-bg);
  color: #ffffff;                    /* 19.4:1 — body copy read at length */
  -webkit-font-smoothing: antialiased;
}

/* Headings: weight and size carry the hierarchy, never a drop in colour. */
h1, h2, h3 { color: #ffffff; letter-spacing: -0.015em; font-weight: 680; }
h1 { letter-spacing: -0.025em; }
h2 {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lg-line-soft);
}

p, li, td, th, dd, dt { color: #ffffff; }

/* Links stay clearly links — a violet that reads as interactive against white body
   copy, underlined so colour is not the only signal. */
a { color: #d8bcff; text-underline-offset: 3px; }
a:hover { color: #ffffff; }

/* Any residual dim utility class on these pages is lifted rather than hunted down
   one selector at a time. The `.text-\[var\(--muted\)\]`-style utilities inherit the
   token, which is already #ffffff, so this catches the literal ones. */
.text-dim, .muted, .text-muted, .subtle, small { color: #ffffff; }

/* ── document card: the page body sits on a card, matching the panels ── */
main {
  background: linear-gradient(168deg, var(--lg-card-2) 0%, var(--lg-card) 60%);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r-lg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 18px 44px -22px rgba(0, 0, 0, 0.92);
  position: relative;
  overflow: hidden;
  padding: 2rem 1.75rem 2.5rem;
  margin-bottom: 1.5rem;
}
/* The hairline violet accent along the top edge — the same signature the panels and
   the approval window carry, so a legal page still reads as the same product. */
main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.45), transparent);
  pointer-events: none;
}

/* Numbers in a legal document are dates, dollar figures and section numbers; they
   should align down a column rather than wobble. */
main, footer { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── the statutory notices ── */
.legal-notice {
  margin-top: 1.5rem;
  padding: 1.1rem 1.15rem;
  background: var(--lg-raise);
  border: 1px solid var(--lg-line-soft);
  border-radius: var(--lg-r-md);
}
.legal-notice + .legal-notice { margin-top: 0.85rem; }
.legal-notice h3 {
  margin: 0 0 0.6rem;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffffff;
}
/* The CFTC text is prescribed in capitals. Kept as capitals in the markup so the
   notice survives being copied out of the page, with line-height opened up because
   a dense block of uppercase is the least readable thing on any page. */
.legal-notice p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: #ffffff;
}
.legal-notice p + p { margin-top: 0.7rem; }
.legal-notice.cftc { border-color: rgba(251, 191, 36, 0.26); }
.legal-notice.prop { border-color: rgba(168, 85, 247, 0.26); }

/* ── footer ── */
footer { color: #ffffff; }
footer a { color: #ffffff; }
footer a:hover { color: #d8bcff; }
.hairline-b { border-bottom: 1px solid var(--lg-line); }

/* ── responsive: a legal document must be readable on a phone, where these pages
      are most often actually opened ── */
@media (max-width: 640px) {
  main { padding: 1.4rem 1.15rem 1.9rem; border-radius: var(--lg-r-md); }
  h2 { margin-top: 1.7rem; }
}