/* Dojang — design tokens
   Trimmed from the full app stylesheet to exactly what the marketing
   landing page consumes: the :root token layer, the base reset, and the
   shared helper classes (.serif / .mono / .tnum / .pill*). All of the
   landing page's own component styles live inline in index.html. */
:root {
  --bg: oklch(0.985 0.005 80);
  --bg-2: oklch(0.965 0.006 80);
  --bg-3: oklch(0.945 0.008 80);
  --surface: #ffffff;
  --ink: oklch(0.18 0.01 60);
  --ink-2: oklch(0.36 0.01 60);
  --ink-3: oklch(0.55 0.01 60);
  --ink-4: oklch(0.72 0.008 60);
  --line: oklch(0.91 0.006 80);
  --line-2: oklch(0.86 0.008 80);
  --accent: oklch(0.52 0.18 25);
  --accent-soft: oklch(0.94 0.04 25);
  --accent-ink: oklch(0.32 0.14 25);
  --good: oklch(0.58 0.12 150);
  --good-soft: oklch(0.94 0.04 150);
  --warn: oklch(0.68 0.13 75);
  --warn-soft: oklch(0.95 0.05 75);
  --bad: oklch(0.55 0.18 25);

  /* Belt colors */
  --belt-white: #f4f1ea;
  --belt-yellow: #e8c14a;
  --belt-orange: #d97a2c;
  --belt-green: #5a8a4e;
  --belt-blue: #3a6aa8;
  --belt-red: #b03a3a;
  --belt-black: #1a1a1a;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(30, 20, 10, 0.04);
  --shadow: 0 1px 3px rgba(30, 20, 10, 0.05), 0 4px 12px rgba(30, 20, 10, 0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui-font, 'Inter'), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

.serif { font-family: var(--display-font, 'Instrument Serif'), Georgia, serif; font-weight: var(--display-weight, 400); letter-spacing: var(--display-tracking, -0.01em); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

/* Pills / badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.6;
}
.pill-good { background: var(--good-soft); color: oklch(0.32 0.1 150); }
.pill-warn { background: var(--warn-soft); color: oklch(0.42 0.13 75); }
.pill-bad { background: var(--accent-soft); color: var(--accent-ink); }
.pill-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}