/**
 * CSS custom-property mirror of tokens.json (Phase 8.1).
 * Keep the two in sync by hand — this file is small and changes rarely
 * (a brand refresh), unlike the generated/derived files elsewhere in the repo.
 */
:root {
  /* color.background */
  --gh-bg-cream: #FFFAF0;
  --gh-bg-off-white: #FFFEFB;

  /* color.ink */
  --gh-ink-primary: #173B3A;

  /* color.accent */
  --gh-accent-rust: #8F321D;
  --gh-accent-amber: #EDBB58;

  /* color.surface */
  --gh-surface-sage: #DCE7D8;
  --gh-surface-sand: #F5EAD8;
  --gh-surface-mint: #E8F0E9;

  /* color.border */
  --gh-border-teal-grey: #42615F;
  --gh-border-tan-beige: #D6C9B7;

  /* font */
  --gh-font-family: "Noto Sans", system-ui, sans-serif;

  /* radius */
  --gh-radius-button: 9.6px;
}

/* Reference component styles — copy/extend these when building web/index.html
   in Phase 8.2, rather than redefining colors ad hoc. */
.gh-button-primary {
  background: var(--gh-ink-primary);
  color: var(--gh-bg-off-white);
  font-weight: bold;
  border-radius: var(--gh-radius-button);
  border: none;
}

.gh-button-secondary {
  background: transparent;
  color: var(--gh-ink-primary);
  font-weight: bold;
  border-radius: var(--gh-radius-button);
  border: 1px solid var(--gh-ink-primary);
}

.gh-eyebrow-label {
  color: var(--gh-accent-rust);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Sudoku board reference (visual, see tokens.json source.caveat) */
.gh-board-box-shaded {
  background: var(--gh-surface-sage);
}

.gh-board-cell-selected {
  background: var(--gh-accent-amber);
}