/**
 * Theme Mondrian previews — iOS ThemeMondrianPreview parity for Items / More / sheets.
 * Palettes are scoped by data-theme-preview so swatches stay accurate under any active theme.
 */

[data-theme-preview="dark"] {
  --tp-canvas: #16161a;
  --tp-primary: #60a5fa;
  --tp-secondary: #3b82f6;
  --tp-neutral: #94a3b8;
  --tp-plasma-a: #60a5fa;
  --tp-plasma-b: #3b82f6;
  --tp-plasma-c: #f4f7fc;
  --tp-grout: rgba(0, 0, 0, 0.92);
  --tp-radius: 4px;
}

[data-theme-preview="light"] {
  --tp-canvas: #f2f4f8;
  --tp-primary: #2563eb;
  --tp-secondary: #1d4ed8;
  --tp-neutral: #64748b;
  --tp-plasma-a: #2563eb;
  --tp-plasma-b: #1d4ed8;
  --tp-plasma-c: #0f172a;
  --tp-grout: rgba(28, 26, 31, 0.92);
  --tp-radius: 4px;
}

[data-theme-preview="vanilla"] {
  --tp-canvas: #f4eed7;
  --tp-primary: #966755;
  --tp-secondary: #cda900;
  --tp-neutral: #bda583;
  --tp-plasma-a: #ffd200;
  --tp-plasma-b: #c9b054;
  --tp-plasma-c: #ac9570;
  --tp-grout: rgba(28, 26, 31, 0.92);
  --tp-radius: 4px;
}

[data-theme-preview="lime"] {
  --tp-canvas: #d5ffb8;
  --tp-primary: #00ba03;
  --tp-secondary: #928862;
  --tp-neutral: #7e7876;
  --tp-plasma-a: #00c837;
  --tp-plasma-b: #86cf86;
  --tp-plasma-c: #00d100;
  --tp-grout: rgba(28, 26, 31, 0.92);
  --tp-radius: 4px;
}

.theme-mondrian {
  --mondrian-gap: 3px;
  display: inline-flex;
  padding: var(--mondrian-gap);
  background: var(--tp-grout);
  border-radius: var(--tp-radius, 4px);
  overflow: hidden;
  flex-shrink: 0;
}

.theme-mondrian--sm {
  width: 40px;
  height: 40px;
}

.theme-mondrian--md {
  width: 56px;
  height: 56px;
}

.theme-mondrian--lg {
  width: 92px;
  height: 92px;
}

.theme-mondrian-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  grid-template-rows: 1.618fr 1fr;
  gap: var(--mondrian-gap);
  width: 100%;
  height: 100%;
}

.theme-mondrian-cell--canvas {
  grid-column: 1;
  grid-row: 1;
  background: var(--tp-canvas);
}

.theme-mondrian-stack--tr {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: 1.618fr 1fr;
  gap: var(--mondrian-gap);
  min-height: 0;
}

.theme-mondrian-cell--primary,
.theme-mondrian-cell--secondary {
  min-height: 0;
}

.theme-mondrian-cell--primary {
  background: var(--tp-primary);
}

.theme-mondrian-cell--secondary {
  background: var(--tp-secondary);
}

.theme-mondrian-cell--neutral {
  grid-column: 1;
  grid-row: 2;
  background: var(--tp-neutral);
}

.theme-mondrian-stack--br {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: 1.618fr 1fr;
  gap: var(--mondrian-gap);
  min-height: 0;
}

.theme-mondrian-cell--plasma-a {
  background: var(--tp-plasma-a);
}

.theme-mondrian-stack--plasma-row {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: var(--mondrian-gap);
  min-height: 0;
}

.theme-mondrian-cell--plasma-b {
  background: var(--tp-plasma-b);
}

.theme-mondrian-cell--plasma-c {
  background: var(--tp-plasma-c);
}

.award-row-icon .theme-mondrian--sm {
  width: 36px;
  height: 36px;
}

.more-theme-preview-swatch .theme-mondrian--md {
  width: 52px;
  height: 52px;
}