:root {
  color-scheme: light dark;
  --var-button-bg-color: light-dark(#4361ee, #8c3e91);
  --var-button-fg-color: light-dark(white, white);
}

body {
  font-family: sans-serif;
  background: light-dark(#f0f4ff, #503870);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

h1,
h2 {
  color: light-dark(#1d3557, #e2caa8);
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.2rem;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: light-dark(white, black);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0 15px light-dark(rgba(0, 0, 0, 0.1), rgba(1, 1, 1, 0.3));
  max-width: 450px;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 220px;
}

.controls label {
  font-weight: bold;
  color: light-dark(#333, #ccc);
}

.controls input[type="color"],
.controls input[type="text"],
.controls select {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(#ccc, #222);
  font-size: 1rem;
}

#colorPickers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.color-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.color-row input[type="color"] {
  padding: 0;
  width: 2rem;
  height: 2rem;
}

.color-row input[type="text"] {
  width: 80px;
  text-transform: uppercase;
  font-family: monospace;
  color: light-dark(#666, #999);
}

#previewContainer {
  padding: 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  margin: 1rem;
}

canvas {
  position: relative;
  width: 128px;
  height: 128px;
  background: repeating-conic-gradient(#fff 0% 25%, #e8e8e8 0% 50%) 50% / 16px 16px;
  border: 1px solid light-dark(#e8e8e8, #171717);
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas:hover {
  background: transparent;
}

button {
  background-color: var(--var-button-bg-color);
  color: var(--var-button-fg-color);
  font-weight: bold;
  padding: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

button#downloadBtn {
  width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
}

#presets {
  width: 100%;
  border-top: 1px solid #ccc;
}

#presets button {
  background-color: light-dark(#fff, #000);
  color: light-dark(#1d3557, #e2caa8);
  border: 1px solid light-dark(#1d3557, #e2caa8);
  margin: 5px 0;
}

#presets button:hover {
  background-color: light-dark(#1d3557, #e2caa8);
  color: light-dark(#fff, #000);
}