/* ════════════════════════════════════════════════════════════════════════
   Legal pages — dark override.

   The policy pages carry their own layout (doc-hero / doc-toc / doc) from
   app.css, which was written for the old light site. Rewriting nine documents'
   markup to move them onto studio.css would risk the text itself, so instead
   this file re-points app.css's tokens at the dark ground and patches the few
   rules that hardcode a light colour. Load it AFTER app.css.

   Palette values are kept in sync with studio.css by hand — legal pages must
   look like the same site, not a second one.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --green:   #16C078;
  --green-2: #2AD98C;
  --green-d: #7FE4B4;   /* h3 colour: must read as a heading ON dark, so it goes lighter, not darker */
  --red:     #FF6B7A;
  --gold:    #F5C46A;

  --ink:     #F2F7F4;
  --body:    #B4C6BC;
  --faint:   #7E938A;

  --paper:   #07100C;
  --paper-2: #0C1A14;
  --white:   #12241B;

  --glass:      rgba(255,255,255,.04);
  --glass-2:    rgba(7,16,12,.72);
  --glass-line: rgba(255,255,255,.12);

  --emboss:      none;
  --emboss-in:   none;
  --glass-shadow: 0 18px 50px -22px rgba(0,0,0,.6);
}

body { background: var(--paper); color: var(--ink); }

/* The light build painted two fixed decorative layers behind everything. On a
   dark ground they read as haze, so the bloom is restated much darker and the
   diamond lattice is dropped entirely. */
body::before {
  background:
    radial-gradient(900px 600px at 84% -6%, rgba(22,192,120,.09), transparent 60%),
    radial-gradient(760px 620px at 4% 16%, rgba(22,192,120,.05), transparent 60%),
    linear-gradient(180deg, #07100C, #08130E 60%, #07100C) !important;
}
body::after { display: none !important; }

.glass, .footer .inner {
  background: var(--glass) !important;
  border: 1px solid var(--glass-line) !important;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.55) !important;
}
.nav .bar { background: var(--glass-2) !important; border-color: var(--glass-line) !important; }

/* app.css sets these three in literal hex, so tokens alone cannot reach them. */
.doc p, .doc ul, .doc ol { color: var(--body) !important; }
.doc strong { color: #fff !important; }
.doc th {
  background: rgba(22,192,120,.10) !important;
  color: var(--green-2) !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}
.doc td, .doc th { border-bottom-color: rgba(255,255,255,.10) !important; }
.doc table { border-color: rgba(255,255,255,.12) !important; }
.legalnote { border-top-color: rgba(255,255,255,.12) !important; color: var(--faint) !important; }
.doc-toc { background: var(--glass) !important; border: 1px solid var(--glass-line); }
.doc-toc a { color: var(--body) !important; }
.doc-toc a:hover { color: var(--green-2) !important; border-left-color: var(--green) !important; }
.footer .base { border-top-color: rgba(255,255,255,.12) !important; }

h1, h2, h3, h4 { color: var(--ink); }
.doc h2 { color: #fff !important; }
a { color: var(--green); }
a:hover { color: var(--green-2); }
:focus-visible { outline-color: var(--green) !important; }

/* app.css paints .btn-primary as WHITE text on a --green-2 → --green-d gradient.
   Both of those tokens had to go light for the dark ground, which left white on
   pale green — unreadable. So the button is restated here the way studio.css
   does it: solid accent, dark ink. */
.btn-primary {
  background: var(--green) !important;
  color: #04150D !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: var(--green-2) !important; color: #04150D !important; }
.btn-glass { background: rgba(255,255,255,.06) !important; color: var(--ink) !important; border-color: var(--glass-line) !important; }
.btn-glass:hover { color: var(--green-2) !important; }
.lang { color: var(--body) !important; border-color: var(--glass-line) !important; }
.brand .tld { color: var(--green) !important; }