/**
 * @file legal.css
 * @description Shared styling for the privacy and terms pages. Reuses the dashboard's
 *              tokens so the legal pages read as part of the same product.
 *
 * @status Active
 * @issues None
 * @todo None
 */

:root {
  --paper: oklch(98.8% 0.004 30);
  --paper-sunk: oklch(96.6% 0.006 30);
  --rule: oklch(90.5% 0.008 30);
  --ink: oklch(23% 0.014 262);
  --ink-2: oklch(46% 0.011 262);
  --ink-3: oklch(62% 0.009 262);
  --brand: oklch(42% 0.145 22);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.mark {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 2rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.mark span { width: 1.4rem; height: 1.4rem; border-radius: .38rem; background: var(--brand); }
h1 { font-size: 1.85rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5rem; }
h2 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.008em;
  margin: 2.5rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule);
}
p, li { margin: 0 0 .85rem; }
ul { padding-left: 1.15rem; }
.updated { color: var(--ink-3); font-size: .875rem; margin-bottom: 2rem; }
code {
  background: var(--paper-sunk); border: 1px solid var(--rule);
  border-radius: .3rem; padding: .1em .35em;
  font: .875em ui-monospace, SFMono-Regular, Menlo, monospace;
}
a { color: var(--brand); }
.note {
  border-left: 3px solid var(--brand); background: var(--paper-sunk);
  padding: .85rem 1.1rem; border-radius: 0 .5rem .5rem 0; margin: 0 0 1rem;
  color: var(--ink-2); font-size: .9375rem;
}
footer {
  margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: .875rem;
}