/* ==========================================================================
   Renk paleti denemeleri — <html data-palette="..."> ile seçilir.
   "default" (mevcut lila/krem) styles.css içinde; buradakiler onun üzerine yazar.
   Slot adları aynı kalır: --lilac her paletin ana vurgu rengidir.
   ========================================================================== */

/* ─── 1) Fiyort: buz mavisi, buzul turkuazı, adaçayı ─── */
:root[data-palette="fjord"] {
  --bg: #f3f6f9; --bg-dot: rgba(40, 60, 90, 0.07);
  --surface: #ffffff; --surface-2: #eef2f6; --surface-3: #e3e9f0;
  --line: #e1e7ee; --line-strong: #cfd8e3;
  --ink: #2b3445; --ink-2: #4c5a70; --muted: #7d8a9c; --faint: #b4bfcc;
  --lilac: #9fcde6; --sky: #c6d3f4; --mint: #cde6c8; --lemon: #ece3ad; --peach: #f4d2bb; --pink: #eec5d2;
  --lilac-ink: #1f6f96; --sky-ink: #4a5fb0; --mint-ink: #3f7f3c; --lemon-ink: #85721a; --peach-ink: #a8622f; --pink-ink: #b0506f;
  --tile-filter: sepia(0.3) saturate(1.7) hue-rotate(165deg) brightness(1.04) contrast(0.9);
}
:root[data-palette="fjord"][data-theme="dark"] {
  --bg: #1a1f29; --bg-dot: rgba(255, 255, 255, 0.04);
  --surface: #212835; --surface-2: #283040; --surface-3: #313a4c;
  --line: #323b4d; --line-strong: #43506a;
  --ink: #e6ecf3; --ink-2: #c3cdd9; --muted: #94a1b3; --faint: #5f6b7f;
  --lilac: #84bad7; --sky: #a7b6e3; --mint: #a9cfa4; --lemon: #d6cb8c; --peach: #e0b796; --pink: #d9a6b6;
  --lilac-ink: #a3d6f2; --sky-ink: #b8c6f5; --mint-ink: #b5e0ae; --lemon-ink: #e8dc95; --peach-ink: #f2c39f; --pink-ink: #f0b4c6;
  --tile-filter: saturate(0.6) brightness(1.05);
}

/* ─── 2) Gün Batımı: mercan, kayısı, gül, leylak ─── */
:root[data-palette="sunset"] {
  --bg: #fff6f1; --bg-dot: rgba(110, 50, 40, 0.07);
  --surface: #fffdfb; --surface-2: #fbefe8; --surface-3: #f5e3d9;
  --line: #f1e1d7; --line-strong: #e5cdbf;
  --ink: #43302f; --ink-2: #6a4f4b; --muted: #9a7f79; --faint: #cdb6ad;
  --lilac: #f7b5a0; --pink: #f4bfd0; --peach: #f9d3a5; --lemon: #f6e3a1; --mint: #cfe0c3; --sky: #d8c8ec;
  --lilac-ink: #c0533a; --pink-ink: #b44a74; --peach-ink: #b46a1f; --lemon-ink: #8b7313; --mint-ink: #4f7a3f; --sky-ink: #7a5aa8;
  --tile-filter: sepia(0.28) saturate(1.1) hue-rotate(-25deg) brightness(1.06) contrast(0.9);
}
:root[data-palette="sunset"][data-theme="dark"] {
  --bg: #241a1c; --bg-dot: rgba(255, 255, 255, 0.04);
  --surface: #2d2124; --surface-2: #35282b; --surface-3: #403034;
  --line: #3f2f33; --line-strong: #56414a;
  --ink: #f6e9e5; --ink-2: #d8c6c1; --muted: #ab9792; --faint: #6f5c5c;
  --lilac: #e59a86; --pink: #dea2b6; --peach: #e6b98a; --lemon: #dccb8a; --mint: #afc7a2; --sky: #bba9d6;
  --lilac-ink: #ffb4a0; --pink-ink: #f6b3c9; --peach-ink: #f8cb98; --lemon-ink: #eedc98; --mint-ink: #c3dbb4; --sky-ink: #cdbcf0;
  --tile-filter: sepia(0.3) saturate(0.8) hue-rotate(-20deg) brightness(1.05);
}

/* ─── 3) Matcha: yeşil çay, yeşim, kum, kil ─── */
:root[data-palette="matcha"] {
  --bg: #f5f6ee; --bg-dot: rgba(50, 70, 40, 0.07);
  --surface: #fdfdf8; --surface-2: #eff1e5; --surface-3: #e5e8d7;
  --line: #e3e6d6; --line-strong: #d0d5bd;
  --ink: #2f3a2c; --ink-2: #52604c; --muted: #84907c; --faint: #b9c1ae;
  --lilac: #bcdca5; --mint: #a9d8c6; --sky: #bcd9e0; --lemon: #ece4a6; --peach: #edd2b0; --pink: #efc9c0;
  --lilac-ink: #4c7a2c; --mint-ink: #2c7a62; --sky-ink: #3a7486; --lemon-ink: #7f7116; --peach-ink: #94642e; --pink-ink: #a5544a;
  --tile-filter: sepia(0.45) saturate(1.6) hue-rotate(40deg) brightness(1.04) contrast(0.9);
}
:root[data-palette="matcha"][data-theme="dark"] {
  --bg: #1b2019; --bg-dot: rgba(255, 255, 255, 0.04);
  --surface: #222820; --surface-2: #293027; --surface-3: #333b30;
  --line: #333b30; --line-strong: #465243;
  --ink: #eaf0e3; --ink-2: #c8d1bf; --muted: #98a38f; --faint: #626d5a;
  --lilac: #9fc489; --mint: #8ec2ae; --sky: #9fc1ca; --lemon: #d3ca8a; --peach: #d6b892; --pink: #d8aba2;
  --lilac-ink: #bde3a3; --mint-ink: #a8dcc8; --sky-ink: #b5dbe5; --lemon-ink: #e6dc98; --peach-ink: #ebcaa0; --pink-ink: #f0bcb2;
  --tile-filter: sepia(0.3) saturate(0.8) hue-rotate(40deg) brightness(1.05);
}

/* ─── 4) Şeker: sakız pembesi, camgöbeği, limon, nane ─── */
:root[data-palette="candy"] {
  --bg: #fefaff; --bg-dot: rgba(80, 40, 110, 0.07);
  --surface: #ffffff; --surface-2: #f8f1fb; --surface-3: #f0e6f5;
  --line: #efe4f4; --line-strong: #e0cfe8;
  --ink: #33264a; --ink-2: #57487a; --muted: #8b7ea6; --faint: #c3b8d6;
  --lilac: #ffb3d9; --pink: #ffc2c2; --peach: #ffd9a8; --lemon: #fff0a0; --mint: #a8f0d8; --sky: #a8e0ff;
  --lilac-ink: #c2307a; --pink-ink: #c23d3d; --peach-ink: #b8641a; --lemon-ink: #8a7600; --mint-ink: #12866a; --sky-ink: #1a74b0;
  --tile-filter: sepia(0.22) saturate(1.15) hue-rotate(255deg) brightness(1.07) contrast(0.9);
}
:root[data-palette="candy"][data-theme="dark"] {
  --bg: #1e1726; --bg-dot: rgba(255, 255, 255, 0.04);
  --surface: #271e31; --surface-2: #2f253b; --surface-3: #392d47;
  --line: #3a2e48; --line-strong: #514163;
  --ink: #f6eefc; --ink-2: #d6c9e6; --muted: #a597bc; --faint: #6c5e82;
  --lilac: #ec95c4; --pink: #eaa3a3; --peach: #ecbf89; --lemon: #e6d683; --mint: #86d4bc; --sky: #86c4e8;
  --lilac-ink: #ffb0d8; --pink-ink: #ffb8b8; --peach-ink: #ffd0a0; --lemon-ink: #fff0a0; --mint-ink: #9ff0d6; --sky-ink: #a8e0ff;
  --tile-filter: sepia(0.2) saturate(0.9) hue-rotate(255deg) brightness(1.05);
}

/* ─── Test paneli (geçici) ─── */
.pal {
  position: fixed; right: 16px; bottom: 42px; z-index: 70;
  display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none;
}
.pal::-webkit-scrollbar { display: none; }
.pal__title { padding: 0 6px 0 8px; color: var(--muted); white-space: nowrap; }
.pal__title kbd { margin-left: 4px; }
.pal button {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font: inherit; border: 0; cursor: pointer; padding: 6px 10px 6px 8px; border-radius: 11px;
  background: transparent; color: var(--muted); white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.pal button:hover { color: var(--ink); background: var(--surface-2); }
.pal button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); font-weight: 700; }
.pal__sw { display: inline-flex; }
.pal__sw i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -4px; }
.pal__sw i:first-child { margin-left: 0; }
@media (max-width: 640px) {
  .pal { left: 16px; right: 16px; justify-content: flex-start; }
  .pal__title kbd { display: none; }
}