:root {
  --cream: #f6f1ea;
  --rose: #c5aca2;
  --cream-deep: #efe6d8;
  --paper: #fffdf9;
  --ink: #14110f;
  --muted: #6f675e;
  --line: rgba(20, 17, 15, 0.1);
  --gold: #c4a574;
  --gold-deep: #9d7d45;
  --black: #111111;
  --shadow: 0 24px 60px rgba(20, 17, 15, 0.08);
  --header-bg: rgba(246, 241, 234, 0.92);
  --inverse-bg: #14110f;
  --inverse-fg: #f6f1ea;
  --footer-fg: #d9d0c4;
  --product-well: #f3eee6;
  --product-rule: rgba(246, 241, 234, 0.28);
  --input-bg: #fff;
  --danger: #8a2b2b;
  --flash-error: #7a1f1f;
  --bar-track: rgba(20, 17, 15, 0.08);
  --thumb: rgba(197, 172, 162, 0.35);
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Outfit", "Helvetica Neue", sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --cream: #1c1916;
  --rose: #3f332f;
  --cream-deep: #2a2420;
  --paper: #26211d;
  --ink: #f3ebe3;
  --muted: #b7aea4;
  --line: rgba(243, 235, 227, 0.12);
  --gold: #d4b88a;
  --gold-deep: #d4b07a;
  --black: #0e0c0b;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --header-bg: rgba(28, 25, 22, 0.92);
  --inverse-bg: #100e0c;
  --inverse-fg: #f3ebe3;
  --footer-fg: #cfc4b6;
  --product-well: #1a1714;
  --product-rule: rgba(243, 235, 227, 0.16);
  --input-bg: #1c1916;
  --danger: #e08a8a;
  --flash-error: #f0b4b4;
  --bar-track: rgba(243, 235, 227, 0.1);
  --thumb: rgba(197, 172, 162, 0.22);
  color-scheme: dark;
}

.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.theme-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4 4.1A8.2 8.2 0 1 0 19.9 15 6.5 6.5 0 0 1 15.4 4.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4 4.1A8.2 8.2 0 1 0 19.9 15 6.5 6.5 0 0 1 15.4 4.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-theme="dark"] .theme-toggle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v1.6M12 19.4V21M4.93 4.93l1.13 1.13M17.94 17.94l1.13 1.13M3 12h1.6M19.4 12H21M4.93 19.07l1.13-1.13M17.94 6.06l1.13-1.13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v1.6M12 19.4V21M4.93 4.93l1.13 1.13M17.94 17.94l1.13 1.13M3 12h1.6M19.4 12H21M4.93 19.07l1.13-1.13M17.94 6.06l1.13-1.13'/%3E%3C/svg%3E");
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--gold-deep);
  border-color: var(--gold-deep);
}