@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Hanken+Grotesk:wght@400..800&family=Space+Grotesk:wght@400..700&display=swap");

/* scrocco "Lime Pop" tokens, taken from the app's static/style.css. Light only. */
:root {
  --ink: oklch(0.2 0.015 255);
  --cream: oklch(0.96 0.015 100);
  --lime: oklch(0.9 0.17 125);
  --violet: oklch(0.85 0.08 300);
  --peach: oklch(0.87 0.09 60);
  --tint-violet: oklch(0.85 0.08 300 / 0.6);
  --tint-peach: oklch(0.87 0.09 60 / 0.6);
  --card: #ffffff;
  --negative: oklch(0.55 0.2 25);
  --positive: oklch(0.52 0.14 145);
  --text-soft: oklch(0.55 0.02 255);
  --line-12: oklch(0.2 0.015 255 / 0.12);
  --line-15: oklch(0.2 0.015 255 / 0.15);
  --line-25: oklch(0.2 0.015 255 / 0.25);
  --inverted-negative: oklch(0.78 0.16 25);

  /* Contract tokens (used by the privacy and terms pages too) */
  --bg: var(--cream);
  --fg: var(--ink);
  --muted: oklch(0.5 0.02 255);
  --accent: var(--lime);
  --line: oklch(0.2 0.015 255 / 0.08);
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-money: "Space Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, monospace;

  --r-card: 20px;
  --r-input: 16px;
  --r-tile: 15px;
  --r-sheet: 28px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

html { background: var(--bg); }

/* Legal pages: lime is a highlighter, not a text colour, so links stay ink
   with a lime underline (same as the app's highlighter look). */
body.legal .legal-body a,
body.legal .legal-links a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}
body.legal .legal-body h1,
body.legal .legal-body h2 { font-weight: 800; letter-spacing: -0.02em; }
body.legal .legal-short {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
}
body.legal .legal-top { border-bottom: 2px solid var(--line); }
body.legal .legal-home { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
body.legal a:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; border-radius: 4px; }