/* ==========================================================================
   emuXL Design System
   --------------------------------------------------------------------------
   Token names follow index.html, which is the reference implementation.
   This file makes that system shareable across the secondary pages
   (user guide, EULA, privacy policy, third-party notices).

   Every colour pairing used below is >= 4.5:1 (WCAG AA for body text).
   ========================================================================== */

:root {
  /* --- Brand ---------------------------------------------------------- */
  --ink:       #201a1a;   /* warm near-black — primary text, dark grounds */
  --slate:     #2e3237;   /* neutral dark — secondary text               */
  --bark:      #835943;   /* mid brown — primary actions, headings       */
  --sand:      #bc987c;   /* warm light — borders, on-dark text          */
  --cyan:      #47b4b6;   /* brand accent — FILLS ONLY on light grounds  */

  /* --brandtext is the darkened cyan for TEXT on light grounds.
     Raw --cyan is 2.35:1 on --paper and fails AA; this is 5.25:1. */
  --brandtext: #1f6f71;

  /* --- Grounds -------------------------------------------------------- */
  --paper:     #f7f1eb;   /* page ground                                 */
  --card:      #fdfaf6;   /* raised surface                              */
  --muted:     #6e4a38;   /* secondary text — 6.94:1 on paper            */
  --line:      #e8ddd4;   /* hairline border                             */
  --line-soft: #f3e9e1;   /* subtle divider                              */
  --code-bg:   #f6ece4;   /* inline code + pre                           */

  /* --- Semantic (kept separate from brand accent) --------------------- */
  --warn-bg:   #fdf3e3;
  --warn-line: #c98a2e;
  --warn-text: #8a5316;   /* 5.74:1 on --warn-bg                         */

  /* --- Type ----------------------------------------------------------- */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}

a { color: var(--brandtext); font-weight: 500; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brandtext); outline-offset: 2px; border-radius: 2px; }

img { max-width: 100%; display: block; }

/* ==========================================================================
   Document pages (EULA, privacy policy, third-party notices)
   ========================================================================== */

.doc {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 40px) 72px;
}

.doc h1 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.doc h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2.4rem 0 0.6rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.doc h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.4rem;
  color: var(--bark);
}

.doc p, .doc li { max-width: 72ch; }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li { margin: 0.3rem 0; }

.meta {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.files {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 2px 0 10px;
}

.caps { text-transform: none; }

/* --- Tables --------------------------------------------------------- */
.doc .table-scroll { overflow-x: auto; margin: 14px 0; }

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  background: var(--card);
  font-size: 0.94rem;
}

.doc th, .doc td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

/* --- Code ----------------------------------------------------------- */
.doc code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 4px;
}

.doc pre {
  font-family: var(--mono);
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  white-space: pre-wrap;
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-x: auto;
}

.doc pre code { background: none; padding: 0; }

/* --- Callout -------------------------------------------------------- */
.note {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn-line);
  border-radius: 0 5px 5px 0;
  padding: 12px 16px;
  margin: 16px 0;
}

.note strong { color: var(--warn-text); }

/* --- Back link ------------------------------------------------------ */
.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  margin-bottom: 26px;
}

.doc-back:hover { color: var(--brandtext); text-decoration: none; }