/* ========================================================== 
   Sudoku Paradise — Pristine Defaults (Full Rewrite)
   ==========================================================
   Purpose:
     - Define untouched / NIL / pristine state
     - Baseline before any theme is applied
     - Swatch buttons visible for all themes
=========================================================== */

/* --- Global Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
  outline: none;
  border: none;
}

/* --- Body / Wrapper --- */
body {
  background: #ffffff;       /* soft neutral white, pristine */
  color: #000;               /* default text color */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Buttons / Controls --- */
button,
select,
input {
  background: transparent;
  color: inherit;
  border: 1px solid #ccc;   /* subtle boundary for buttons */
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

/* --- Theme Swatches / Indicators --- */
.theme-dropdown-menu button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #000;          /* visible boundary for all swatches */
  cursor: pointer;
  box-shadow: none;                 /* no glow */
  text-indent: -9999px;             /* hide text */
  overflow: hidden;
  background-color: var(--swatch-color, #fff); /* show swatch color */
}

.theme-dropdown-menu button.active {
  border-color: #000;               /* maintain border when active */
}

.swatch-dot {
  background: transparent;          /* pristine state dot */
  border: 1px solid #ccc;
}

/* --- Layout Elements --- */
header,
main,
footer,
section,
div {
  background: transparent;
}

/* --- Grid / Cells --- */
.sudoku-grid,
.sudoku-grid div {
  background: transparent;
  border: 1px solid #ccc;
}

/* --- Number Pad --- */
.number-pad button {
  background: transparent;
  border: 1px solid #ccc;
  color: inherit;
  border-radius: 4px;
}

/* --- Hint / Overlay --- */
.hint-overlay,
.hint-tooltip {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

/* --- Misc --- */
.hidden {
  display: none;
}
