/* tasteHQ shared design system — one source of truth for tokens, typography,
 * and resets across every page. Set `data-theme="light"` or `data-theme="dark"`
 * on the <html> element to pick a theme; default is dark.
 *
 * Pages keep their own component CSS (feature-grid, conformance-strip, axis
 * tables, gallery cards, etc.) — only the truly-shared bits live here.
 *
 * Loaded BEFORE the page's inline <style> so per-page rules win via cascade.
 */

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 80px; }

/* ── Tokens — dark (default) ──────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
  /* Surfaces */
  --bg:            #0a0a0c;
  --surface:       #131316;
  --surface-2:     #1a1a1f;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.08);
  --border-faint:  rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text:          #ededed;
  --muted:         #999ca3;
  --dim:           #6b6e76;

  /* Brand accent — same in both themes so the platform reads as one identity */
  --accent:        #c6613f;
  --accent-dim:    rgba(198, 97, 63, 0.14);
  --accent-border: rgba(198, 97, 63, 0.32);

  /* Verdict signal colors */
  --green:         #6ddeaa;
  --green-soft:    rgba(109, 222, 170, 0.14);
  --amber:         #d8b257;
  --amber-soft:    rgba(216, 178, 87, 0.14);
  --red:           #d97362;
  --red-soft:      rgba(217, 115, 98, 0.14);

  /* Typography stack */
  --serif:         'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans:          ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:          "SF Mono", "Fira Code", ui-monospace, "Roboto Mono", monospace;

  /* Shape */
  --radius:        8px;
  --radius-lg:     14px;
}

/* ── Tokens — light ───────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:            #f8f7f4;
  --surface:       #ffffff;
  --surface-2:     #f0eeea;

  --border:        rgba(0, 0, 0, 0.10);
  --border-faint:  rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.16);

  --text:          #111112;
  --muted:         #5d5f68;
  --dim:           #92949b;

  --accent:        #c6613f;
  --accent-dim:    rgba(198, 97, 63, 0.10);
  --accent-border: rgba(198, 97, 63, 0.30);

  --green:         #3c7a55;
  --green-soft:    rgba(60, 122, 85, 0.12);
  --amber:         #b08400;
  --amber-soft:    rgba(176, 132, 0, 0.12);
  --red:           #b34a3a;
  --red-soft:      rgba(179, 74, 58, 0.12);
}

/* ── Body base ────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Inline code ──────────────────────────────────────────────────────── */
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--border-faint);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ── Links ────────────────────────────────────────────────────────────── */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--accent); }
