:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #4b5563;
  --outline: #e0e0e0;
  --primary: #0066cc;
  --logo-ink: #1a1a1a;
  --logo-accent: #f47216;
}

:root[data-mode="dark"] {
  --bg: #000000;
  --surface: #1f1f1f;
  --text: #e8e8e8;
  --muted: #b3b3b3;
  --outline: #404040;
  --primary: #3b82f6;
  --logo-ink: #e8e8e8;
  --logo-accent: #f47216;
}

:root[data-scheme="ocean"] {
  --bg: #f8fbff;
  --surface: #ffffff;
  --text: #16324f;
  --muted: #4e6a85;
  --outline: #c8dcf1;
  --primary: #0078d4;
  --logo-ink: #16324f;
  --logo-accent: #f47216;
}

:root[data-scheme="ocean"][data-mode="dark"] {
  --bg: #000000;
  --surface: #111827;
  --text: #e5f0ff;
  --muted: #9db7d5;
  --outline: #274060;
  --primary: #4ea6ff;
  --logo-ink: #e5f0ff;
  --logo-accent: #f47216;
}

:root[data-scheme="forest"] {
  --bg: #f5fbf7;
  --surface: #ffffff;
  --text: #173b24;
  --muted: #466654;
  --outline: #c0dbc9;
  --primary: #2d7d46;
  --logo-ink: #173b24;
  --logo-accent: #f47216;
}

:root[data-scheme="forest"][data-mode="dark"] {
  --bg: #000000;
  --surface: #112218;
  --text: #e7f4eb;
  --muted: #a7cbb3;
  --outline: #335542;
  --primary: #49a665;
  --logo-ink: #e7f4eb;
  --logo-accent: #f47216;
}

:root[data-scheme="sand"] {
  --bg: #fffbf5;
  --surface: #fffcf8;
  --text: #292524;
  --muted: #6b5b49;
  --outline: #e7d4bc;
  --primary: #d97706;
  --logo-ink: #292524;
  --logo-accent: #f47216;
}

:root[data-scheme="sand"][data-mode="dark"] {
  --bg: #000000;
  --surface: #2a2118;
  --text: #fef3e2;
  --muted: #d4b993;
  --outline: #5d4a36;
  --primary: #f59e0b;
  --logo-ink: #fef3e2;
  --logo-accent: #f47216;
}

:root[data-scheme="red"] {
  --bg: #fff5f7;
  --surface: #ffffff;
  --text: #3b0a16;
  --muted: #7b2438;
  --outline: #efb4c1;
  --primary: #dc143c;
  --logo-ink: #3b0a16;
  --logo-accent: #f47216;
}

:root[data-scheme="red"][data-mode="dark"] {
  --bg: #000000;
  --surface: #000000;
  --text: #f5f5f5;
  --muted: #d1d5db;
  --outline: #2a2a2a;
  --primary: #dc143c;
  --logo-ink: #f5f5f5;
  --logo-accent: #f47216;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--primary) 12%, transparent) 0, transparent 33%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--primary) 8%, transparent) 0, transparent 37%),
    var(--bg);
  padding: 1rem;
}

:root[data-scheme="red"] body {
  background: var(--bg);
}

.app {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  gap: 0.5rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 1rem;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
}

p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.controls {
  display: grid;
  gap: 0.75rem;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn,
.select {
  font: inherit;
  border: 1px solid var(--outline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 90%, black 10%);
  color: var(--text);
  padding: 0.55rem 0.85rem;
}

.btn {
  cursor: pointer;
}

.btn:focus-visible,
.select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--logo-accent) 65%, white 35%);
  outline-offset: 2px;
}

.stage {
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 1rem;
}

.logo {
  display: block;
  width: min(100%, 760px);
  height: auto;
  max-height: none;
  aspect-ratio: auto;
}

@media (max-width: 640px) {
  .control-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.palette-info {
  display: grid;
  gap: 1rem;
}

.palette-info__header {
  display: grid;
  gap: 0.35rem;
}

.palette-info__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.palette-info__desc {
  margin: 0;
  color: var(--muted);
}

.palette-info__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, black 15%);
  font-size: 0.85rem;
  color: var(--text);
}

.chip__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--outline) 60%, transparent);
}

.preview-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.preview-card {
  border: 1px solid var(--outline);
  border-radius: 10px;
  padding: 0.85rem;
  background: color-mix(in srgb, var(--surface) 92%, black 8%);
  display: grid;
  gap: 0.5rem;
}

.preview-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.preview-card__body {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.preview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preview-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--surface) 90%, black 10%);
  color: var(--text);
  cursor: pointer;
}

.preview-btn--primary {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 70%, black 30%);
}

.preview-btn--ghost {
  background: transparent;
}

.preview-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: color-mix(in srgb, var(--primary) 80%, black 20%);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}

.preview-swatch-row {
  display: flex;
  gap: 0.4rem;
}

.preview-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--outline);
}