/* BrewCSS Themes — Vanilla + Material + Color Swatches */

/* ══════════════════════════════════════════
   VANILLA THEME (default) — Blocky, GridForms, Bones.css
   Sharp borders, no radius, grid cells, functional
   ══════════════════════════════════════════ */
[data-theme="vanilla"] {
  --surface: #fff;
  --surface-dim: #f4f4f4;
  --surface-container: #fafafa;
  --surface-container-low: #f6f6f6;
  --surface-container-high: #eee;
  --surface-container-highest: #e0e0e0;
  --on-surface: #111;
  --on-surface-variant: #555;
  --outline: #222;
  --outline-variant: #ccc;
  --inverse-surface: #111;
  --inverse-on-surface: #f5f5f5;
  --background: #f5f5f5;
  --shadow: none;
  --shadow-lg: none;
}

[data-theme="vanilla"] *, [data-theme="vanilla"] *::before, [data-theme="vanilla"] *::after {
  border-radius: 0 !important;
}

[data-theme="vanilla"] article {
  border: 2px solid var(--outline);
  box-shadow: none;
}

[data-theme="vanilla"] button, [data-theme="vanilla"] .button {
  border: 2px solid var(--outline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-theme="vanilla"] input, [data-theme="vanilla"] select, [data-theme="vanilla"] textarea {
  border: 2px solid var(--outline);
}

[data-theme="vanilla"] dialog {
  border: 2px solid var(--outline);
}

/* ══════════════════════════════════════════
   MATERIAL THEME — M3 Design, elevation
   ══════════════════════════════════════════ */
[data-theme="material"] {
  --surface: #fef7ff;
  --surface-dim: #ded8e0;
  --surface-container: #f3edf7;
  --surface-container-low: #f7f2fa;
  --surface-container-high: #ece6f0;
  --surface-container-highest: #e6e0e9;
  --on-surface: #1d1b20;
  --on-surface-variant: #49454f;
  --outline: #79747e;
  --outline-variant: #cac4d0;
  --inverse-surface: #322f35;
  --inverse-on-surface: #f5eff7;
  --background: #fef7ff;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --shadow-lg: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
}

[data-theme="material"] article {
  border-radius: 12px;
  box-shadow: var(--shadow);
  border-width: 1px;
}

[data-theme="material"] button, [data-theme="material"] .button {
  border-radius: 20px;
}

[data-theme="material"] button.fill {
  box-shadow: var(--shadow);
}

[data-theme="material"] input, [data-theme="material"] select, [data-theme="material"] textarea {
  border-radius: 4px 4px 0 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-width: 2px;
}

[data-theme="material"] dialog {
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}

[data-theme="material"] nav.left, [data-theme="material"] nav.right {
  border-radius: 0 16px 16px 0;
}

[data-theme="material"] nav.right {
  border-radius: 16px 0 0 16px;
}

[data-theme="material"] .chip, [data-theme="material"] .badge {
  border-radius: 8px;
}

/* ══════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════ */
[data-dark="true"][data-theme="vanilla"] {
  --surface: #111;
  --surface-dim: #0a0a0a;
  --surface-container: #1a1a1a;
  --surface-container-low: #141414;
  --surface-container-high: #222;
  --surface-container-highest: #2a2a2a;
  --on-surface: #e8e8e8;
  --on-surface-variant: #999;
  --outline: #888;
  --outline-variant: #444;
  --inverse-surface: #e8e8e8;
  --inverse-on-surface: #111;
  --background: #0a0a0a;
  --shadow: none;
  --shadow-lg: none;
}

[data-dark="true"][data-theme="material"] {
  --surface: #141218;
  --surface-dim: #141218;
  --surface-container: #211f26;
  --surface-container-low: #1d1b20;
  --surface-container-high: #2b2930;
  --surface-container-highest: #36343b;
  --on-surface: #e6e0e9;
  --on-surface-variant: #cac4d0;
  --outline: #938f99;
  --outline-variant: #49454f;
  --inverse-surface: #e6e0e9;
  --inverse-on-surface: #322f35;
  --background: #141218;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.6);
}

/* ══════════════════════════════════════════
   COLOR SWATCHES — Primary color overrides
   ══════════════════════════════════════════ */
[data-color="purple"] {
  --primary: #6750a4; --on-primary: #fff;
  --primary-container: #e9ddff; --on-primary-container: #22005d;
  --secondary: #625b71; --on-secondary: #fff;
  --tertiary: #7e5260; --on-tertiary: #fff;
}
[data-color="blue"] {
  --primary: #1b6ef3; --on-primary: #fff;
  --primary-container: #d6e3ff; --on-primary-container: #001b3e;
  --secondary: #565f71; --on-secondary: #fff;
  --tertiary: #715573; --on-tertiary: #fff;
}
[data-color="teal"] {
  --primary: #006a6a; --on-primary: #fff;
  --primary-container: #6ff7f6; --on-primary-container: #002020;
  --secondary: #4a6363; --on-secondary: #fff;
  --tertiary: #4b607c; --on-tertiary: #fff;
}
[data-color="green"] {
  --primary: #386a20; --on-primary: #fff;
  --primary-container: #b7f397; --on-primary-container: #042100;
  --secondary: #55624c; --on-secondary: #fff;
  --tertiary: #386667; --on-tertiary: #fff;
}
[data-color="orange"] {
  --primary: #a0541c; --on-primary: #fff;
  --primary-container: #ffdbc8; --on-primary-container: #351000;
  --secondary: #765849; --on-secondary: #fff;
  --tertiary: #636032; --on-tertiary: #fff;
}
[data-color="red"] {
  --primary: #c00018; --on-primary: #fff;
  --primary-container: #ffdad6; --on-primary-container: #410002;
  --secondary: #775653; --on-secondary: #fff;
  --tertiary: #755a2f; --on-tertiary: #fff;
}
[data-color="pink"] {
  --primary: #b91d72; --on-primary: #fff;
  --primary-container: #ffd8e8; --on-primary-container: #3e0022;
  --secondary: #745660; --on-secondary: #fff;
  --tertiary: #7c5635; --on-tertiary: #fff;
}

/* Dark mode color adjustments */
[data-dark="true"][data-color="purple"] {
  --primary: #cfbcff; --on-primary: #381e72;
  --primary-container: #4f378b; --on-primary-container: #e9ddff;
}
[data-dark="true"][data-color="blue"] {
  --primary: #a8c8ff; --on-primary: #003063;
  --primary-container: #00468a; --on-primary-container: #d6e3ff;
}
[data-dark="true"][data-color="teal"] {
  --primary: #4cdada; --on-primary: #003737;
  --primary-container: #004f4f; --on-primary-container: #6ff7f6;
}
[data-dark="true"][data-color="green"] {
  --primary: #9cd67d; --on-primary: #0a3900;
  --primary-container: #205107; --on-primary-container: #b7f397;
}
[data-dark="true"][data-color="orange"] {
  --primary: #ffb688; --on-primary: #562000;
  --primary-container: #7a3b04; --on-primary-container: #ffdbc8;
}
[data-dark="true"][data-color="red"] {
  --primary: #ffb4ab; --on-primary: #690005;
  --primary-container: #93000a; --on-primary-container: #ffdad6;
}
[data-dark="true"][data-color="pink"] {
  --primary: #ffb0ce; --on-primary: #63003a;
  --primary-container: #8e0052; --on-primary-container: #ffd8e8;
}

/* ══════════════════════════════════════════
   SWATCH SELECTOR UI
   ══════════════════════════════════════════ */
.color-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 48px;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  padding: 0;
  flex-shrink: 0;
}

.color-swatch:hover {
  transform: scale(1.2);
}

.color-swatch.active {
  border-color: var(--inverse-on-surface);
  transform: scale(1.15);
}

.color-swatch[data-swatch="purple"] { background: #6750a4; }
.color-swatch[data-swatch="blue"]   { background: #1b6ef3; }
.color-swatch[data-swatch="teal"]   { background: #006a6a; }
.color-swatch[data-swatch="green"]  { background: #386a20; }
.color-swatch[data-swatch="orange"] { background: #a0541c; }
.color-swatch[data-swatch="red"]    { background: #c00018; }
.color-swatch[data-swatch="pink"]   { background: #b91d72; }

/* ══════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════ */
.theme-toggle {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 48px;
  gap: 0;
  border-right: 1px solid rgba(255,255,255,.12);
}

.theme-toggle button {
  font-size: .7rem;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: var(--inverse-on-surface);
  cursor: pointer;
  font-family: var(--font-family);
  transition: background .12s;
  min-height: auto;
}

.theme-toggle button:first-child {
  border-radius: 4px 0 0 4px;
  border-right: none;
}

.theme-toggle button:last-child {
  border-radius: 0 4px 4px 0;
}

.theme-toggle button.active {
  background: rgba(255,255,255,.2);
  font-weight: 700;
}

.theme-toggle button:hover {
  background: rgba(255,255,255,.1);
}