/* BlunderMate Lab — shared design tokens and base reset.
   Linked by every Lab page so the palette has a single source of truth.
   Tuned to a Codex-style monochrome light palette: warm off-white paper,
   graphite text, hairline rings instead of shadows, charcoal accents
   instead of a bright primary hue. */

:root {
  color-scheme: light;

  /* Backgrounds — warm neutral paper */
  --bg-base: #faf9f7;
  --bg-surface: #ffffff;
  --bg-elevated: #f2f1ee;

  /* Text — graphite */
  --tx: #0f0f0f;
  --tx2: #595959;
  --tx3: #9a9a9a;

  /* Accent — charcoal. Primary actions are black-filled, not blue. */
  --ac: #0f0f0f;
  --ac-hover: #1f1f1f;
  --ac-active: #2a2a2a;
  --ac-lo: rgba(15, 15, 15, 0.06);

  /* Chess move highlight (inset ring around the last-move square) */
  --move-ring: rgba(15, 15, 15, 0.45);
  --move-ring-print: rgba(15, 15, 15, 0.55);

  /* Soft sage hint for the brand wordmark only — Codex peppers a quiet
     warm-green through its surfaces without ever shouting. */
  --brand-accent: #2f5e54;

  /* Borders, dividers, press feedback — hairlines, no heavy strokes */
  --brd: rgba(15, 15, 15, 0.08);
  --brd2: rgba(15, 15, 15, 0.16);
  --list-divider: rgba(15, 15, 15, 0.06);
  --press-fill: rgba(15, 15, 15, 0.04);

  /* Card elevation — hairline ring only, no drop shadow */
  --card-ring: 0 0 0 1px rgba(15, 15, 15, 0.07);

  /* Status + chess board tones */
  --coral: #b14338;
  --light-square: #f0d9b5;
  --dark-square: #b58863;

  /* Type */
  --font-sans: 'Inter', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg-base);
  color: var(--tx);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--brd2);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-color: var(--tx);
}

/* Brand wordmark — blunder (graphite) + mate (sage), in mono */
.brand-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-mark .b {
  color: var(--tx);
}

.brand-mark .m {
  color: var(--brand-accent);
}

.brand-mark .lab {
  color: var(--tx3);
  font-weight: 600;
}