/* Tema değişkenleri — body[data-theme] */
body[data-theme] {
  --navy: var(--t-navy);
  --navy-2: var(--t-navy2);
  --navy-3: var(--t-navy3);
  --gold: var(--t-gold);
  --gold-2: var(--t-gold2);
  --paper: var(--t-paper);
  --ink: var(--t-ink);
}

body[data-theme] {
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 90%, #fff) 0%, var(--paper) 40%, color-mix(in srgb, var(--navy) 6%, var(--paper)) 100%);
}

.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .65rem;
  margin: .6rem 0 1rem;
}
.theme-swatch {
  position: relative;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  padding: 0;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  font: inherit;
  color: inherit;
}
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch.is-on,
.theme-swatch:has(input:checked) {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent);
}
.theme-swatch .bars {
  display: grid;
  grid-template-columns: 1.2fr .8fr .6fr;
  height: 36px;
}
.theme-swatch .bars span { display: block; }
.theme-swatch .name {
  display: block;
  padding: .45rem .55rem .55rem;
  font-size: .78rem;
  font-weight: 600;
  color: #1c2430;
  line-height: 1.25;
}

.transition-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .55rem;
  margin: .6rem 0 1rem;
}
.transition-swatch {
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: .55rem .65rem;
  cursor: pointer;
  background: #fff;
  font: inherit;
  text-align: left;
}
.transition-swatch input { margin-right: .35rem; }
.transition-swatch.is-on,
.transition-swatch:has(input:checked) {
  border-color: var(--navy);
  background: color-mix(in srgb, var(--gold) 12%, #fff);
}
.transition-swatch strong { display: block; font-size: .82rem; }
.transition-swatch small { color: #5b6775; font-size: .72rem; }