@charset "UTF-8";

/* Colour themes.
   The original palette in styles.css stays the default; nothing here applies until a
   theme is chosen, so the shop looks exactly as before on a first visit.
   Each theme only reassigns tokens, so every component follows automatically. */

/* ---------- Linen: soft paper, warm ink, muted copper ---------- */
:root[data-theme="linen"] {
  --ink: #efe6d7;
  --ink-deep: #f8f2e7;
  --surface: #f7f0e4;
  --surface-raised: #fdf8ef;
  --cream: #2c2118;
  --cream-soft: #46382a;
  --cream-muted: #6b5a46;
  --amber: #8a4a1c;
  --amber-bright: #6f3a13;
  --amber-dark: #b5763d;
  --sage: #55654c;
  --line: #d8c8b0;
  --line-soft: #e6d9c4;
  --shadow: #b9a88f;
  --focus: #6f3811;
  --error: #9a3d2b;
  --backdrop: #2c2118d9;
  --tray: #fdf8eff0;
  --gradient-hero: radial-gradient(circle at 72% 44%, #f6e6cd 0%, #f2e6d3 25%, #efe6d7 52%, #f8f2e7 100%);
  --gradient-fallback: radial-gradient(circle at 70% 44%, #f7e3c4 0%, #f0e2cf 28%, #efe6d7 64%);
  --gradient-shade: linear-gradient(90deg, #efe6d7f2 0%, #efe6d7c4 35%, #efe6d738 65%, #efe6d71a 100%);
  --gradient-card: linear-gradient(145deg, #fdf8ef 0%, #f7f0e4 100%);
  --gradient-glow: radial-gradient(circle, #b5763d24 0%, #b5763d00 70%);
  --gradient-petal: radial-gradient(ellipse at 30% 25%, #2c21180f, #b5763d08 55%, #2c211800 75%);
  --gradient-grain: repeating-radial-gradient(circle at 17% 32%, #2c211810 0 0.45px, #00000000 0.8px 3px);
  --hero-media-filter: sepia(0.22) saturate(0.8) brightness(1.06) contrast(0.97);

  /* 3D candle palette */
  --wax: #d8c3a1;
  --wax-emissive: #7a5330;
  --pool: #d3a978;
  --pool-glow: #a4551f;
  --flame-outer: #ffc35c;
  --flame-outer-tip: #ff7a1e;
  --flame-inner: #fff8dc;
  --flame-inner-tip: #ffb84d;
  --flame-light: #ffb066;
  --hemi-sky: #f0e0c8;
  --hemi-ground: #d8c9b4;
  --fill-light: #cfd8e8;
  --heart: #9a7d5d;
  --wick: #fff8ea;
  --tree: #35543a;
  --tree-lights: #c88a3c;
  --bauble-red: #9a4a3a;
  --bauble-gold: #b58a52;
  --key-light: #ffe8bd;
  --rim-light: #cfe0f5;
  --feature: #7a6244;
}

/* ---------- Rose: dusty plaster and faded petals ---------- */
:root[data-theme="rose"] {
  --ink: #1a1214;
  --ink-deep: #100a0c;
  --surface: #241a1d;
  --surface-raised: #2e2125;
  --cream: #f6e9e6;
  --cream-soft: #ddc7c4;
  --cream-muted: #b09a97;
  --amber: #d98a92;
  --amber-bright: #efb9be;
  --amber-dark: #8d5158;
  --sage: #c2a3a0;
  --line: #3d2b30;
  --line-soft: #2e2024;
  --shadow: #0a0608;
  --focus: #f3c9cd;
  --error: #e8b3a8;
  --backdrop: #100a0ce0;
  --tray: #241a1df0;
  --gradient-hero: radial-gradient(circle at 72% 44%, #43262c 0%, #291a1e 25%, #1a1214 52%, #100a0c 100%);
  --gradient-fallback: radial-gradient(circle at 70% 44%, #7a4650 0%, #3a2429 28%, #1a1214 64%);
  --gradient-shade: linear-gradient(90deg, #1a1214f2 0%, #1a1214c4 35%, #1a121438 65%, #1a12141a 100%);
  --gradient-card: linear-gradient(145deg, #2e2125 0%, #241a1d 100%);
  --gradient-glow: radial-gradient(circle, #d98a9224 0%, #d98a9200 70%);
  --gradient-petal: radial-gradient(ellipse at 30% 25%, #f6e9e612, #d98a9208 55%, #f6e9e600 75%);
  --gradient-grain: repeating-radial-gradient(circle at 17% 32%, #f6e9e618 0 0.45px, #00000000 0.8px 3px);
  --hero-media-filter: sepia(0.08) saturate(0.88) hue-rotate(-8deg) brightness(1.02);

  /* 3D candle palette: rose-tinted wax, warmer halo */
  --wax: #e6c6c2;
  --wax-emissive: #7d3d44;
  --pool: #dda2a6;
  --pool-glow: #a1525c;
  --flame-outer: #ffc98f;
  --flame-outer-tip: #ff7f6b;
  --flame-inner: #fff2ec;
  --flame-inner-tip: #ffb0a2;
  --flame-light: #ffa894;
  --hemi-sky: #f0c8c8;
  --hemi-ground: #2a1c20;
  --fill-light: #c9b0c4;
  --heart: #8f6c68;
  --wick: #f8e8e2;
  --tree: #26362c;
  --tree-lights: #f2c0a0;
  --bauble-red: #8f3f4b;
  --bauble-gold: #b28a68;
  --key-light: #ffe0dd;
  --rim-light: #e0c8f0;
  --feature: #7a4a4e;
}

/* ---------- Sea glass: cool teal, quiet and green ---------- */
:root[data-theme="sea"] {
  --ink: #0f1a18;
  --ink-deep: #08110f;
  --surface: #15221f;
  --surface-raised: #1b2b27;
  --cream: #e8f2ec;
  --cream-soft: #c6d8cf;
  --cream-muted: #94a9a0;
  --amber: #7fc2a8;
  --amber-bright: #a3dcc4;
  --amber-dark: #3f7f68;
  --sage: #9fd0bb;
  --line: #26403a;
  --line-soft: #1d312c;
  --shadow: #05100d;
  --focus: #b7e8d2;
  --error: #e6b5a2;
  --backdrop: #08110fe0;
  --tray: #15221ff0;
  --gradient-hero: radial-gradient(circle at 72% 44%, #1d3a31 0%, #132420 25%, #0f1a18 52%, #08110f 100%);
  --gradient-fallback: radial-gradient(circle at 70% 44%, #2f6b56 0%, #193029 28%, #0f1a18 64%);
  --gradient-shade: linear-gradient(90deg, #0f1a18f2 0%, #0f1a18c4 35%, #0f1a1838 65%, #0f1a181a 100%);
  --gradient-card: linear-gradient(145deg, #1b2b27 0%, #15221f 100%);
  --gradient-glow: radial-gradient(circle, #7fc2a824 0%, #7fc2a800 70%);
  --gradient-petal: radial-gradient(ellipse at 30% 25%, #e8f2ec12, #7fc2a808 55%, #e8f2ec00 75%);
  --gradient-grain: repeating-radial-gradient(circle at 17% 32%, #e8f2ec18 0 0.45px, #00000000 0.8px 3px);
  --hero-media-filter: sepia(0.3) hue-rotate(125deg) saturate(0.85) brightness(1.03);

  /* 3D candle palette: cool wax, warm flame so it still reads as fire */
  --wax: #dcebe3;
  --wax-emissive: #2f5f4f;
  --pool: #cfe6da;
  --pool-glow: #3d7d66;
  --flame-outer: #cdf7dd;
  --flame-outer-tip: #7fe8bd;
  --flame-inner: #ffffff;
  --flame-inner-tip: #d8ffe9;
  --flame-light: #a8f0cd;
  --hemi-sky: #d8f0e6;
  --hemi-ground: #16241f;
  --fill-light: #b8d8e8;
  --heart: #64796f;
  --wick: #f2f6ec;
  --tree: #173b31;
  --tree-lights: #d8f2c8;
  --bauble-red: #9a5548;
  --bauble-gold: #b8a66c;
  --key-light: #dcf0e4;
  --rim-light: #d0f0ff;
  --feature: #3f6b5c;
}

/* ---------- Plum: violet dusk ---------- */
:root[data-theme="plum"] {
  --ink: #16111c;
  --ink-deep: #0c0810;
  --surface: #1e1826;
  --surface-raised: #271f31;
  --cream: #efe8f6;
  --cream-soft: #cdc2d9;
  --cream-muted: #9d90ac;
  --amber: #b48ad9;
  --amber-bright: #cfadea;
  --amber-dark: #6b4a8d;
  --sage: #b0a4c4;
  --line: #342a42;
  --line-soft: #271f33;
  --shadow: #08050c;
  --focus: #dcc2f5;
  --error: #e6b5a2;
  --backdrop: #0c0810e0;
  --tray: #1e1826f0;
  --gradient-hero: radial-gradient(circle at 72% 44%, #362545 0%, #221930 25%, #16111c 52%, #0c0810 100%);
  --gradient-fallback: radial-gradient(circle at 70% 44%, #5c3f7a 0%, #2b2038 28%, #16111c 64%);
  --gradient-shade: linear-gradient(90deg, #16111cf2 0%, #16111cc4 35%, #16111c38 65%, #16111c1a 100%);
  --gradient-card: linear-gradient(145deg, #271f31 0%, #1e1826 100%);
  --gradient-glow: radial-gradient(circle, #b48ad924 0%, #b48ad900 70%);
  --gradient-petal: radial-gradient(ellipse at 30% 25%, #efe8f612, #b48ad908 55%, #efe8f600 75%);
  --gradient-grain: repeating-radial-gradient(circle at 17% 32%, #efe8f618 0 0.45px, #00000000 0.8px 3px);
  --hero-media-filter: sepia(0.24) hue-rotate(215deg) saturate(0.9) brightness(1.02);

  /* 3D candle palette: lift the wax so it separates from the dark background */
  --wax: #ece2f5;
  --wax-emissive: #5a3f80;
  --pool: #ded0ee;
  --pool-glow: #7a5aa0;
  --flame-outer: #e8d8ff;
  --flame-outer-tip: #c5a2f5;
  --flame-inner: #ffffff;
  --flame-inner-tip: #e8d8ff;
  --flame-light: #c7b0f5;
  --hemi-sky: #e0d4f0;
  --hemi-ground: #1a1424;
  --fill-light: #c8d0ec;
  --heart: #796581;
  --wick: #f4eaf8;
  --tree: #242b35;
  --tree-lights: #e8c898;
  --bauble-red: #87384f;
  --bauble-gold: #b69868;
  --key-light: #e8daff;
  --rim-light: #d8c8ff;
  --feature: #6a5280;
}

/* Keep the mobile shade gradient aligned with the active theme. */
@media (max-width: 48rem) {
  :root[data-theme="linen"] { --gradient-shade: linear-gradient(180deg, #efe6d7a8 0%, #efe6d755 45%, #efe6d7e6 100%); }
  :root[data-theme="rose"] { --gradient-shade: linear-gradient(180deg, #1a1214a8 0%, #1a121455 45%, #1a1214e6 100%); }
  :root[data-theme="sea"] { --gradient-shade: linear-gradient(180deg, #0f1a18a8 0%, #0f1a1855 45%, #0f1a18e6 100%); }
  :root[data-theme="plum"] { --gradient-shade: linear-gradient(180deg, #16111ca8 0%, #16111c55 45%, #16111ce6 100%); }
  :root[data-theme="christmas"] { --gradient-shade: linear-gradient(180deg, #0c1410a8 0%, #0c141055 45%, #0c1410e6 100%); }
}


/* ---------- Ember: the original warm amber palette ---------- */
:root[data-theme="ember"] {
  --ink: #17130f;
  --ink-deep: #0d0b09;
  --surface: #211b16;
  --surface-raised: #2a221b;
  --cream: #f3eadb;
  --cream-soft: #d9cdbb;
  --cream-muted: #aa9d8b;
  --amber: #dda45f;
  --amber-bright: #f2c17e;
  --amber-dark: #8b5b30;
  --sage: #9ba58e;
  --line: #40352a;
  --line-soft: #2d261f;
  --shadow: #080604;
  --focus: #f6cf94;
  --error: #e6b5a2;
  --backdrop: #0d0b09e0;
  --tray: #211b16f0;
  --wax: #d7b48c;
  --wax-emissive: #6b2c14;
  --pool: #c99058;
  --pool-glow: #8d3e17;
  --flame-outer: #ffc35c;
  --flame-outer-tip: #ff6a16;
  --flame-inner: #fff4c4;
  --flame-inner-tip: #ffad38;
  --flame-light: #ff9b42;
  --hemi-sky: #d9b18a;
  --hemi-ground: #17130f;
  --fill-light: #b7c0aa;
  --heart: #7a6352;
  --wick: #f4e8d4;
  --tree: #1d3020;
  --tree-lights: #ffc36a;
  --bauble-red: #8e3226;
  --bauble-gold: #b8873d;
  --key-light: #ffe0b0;
  --rim-light: #bcd4ff;
  --feature: #5a3f2a;
  --gradient-hero: radial-gradient(circle at 72% 44%, #3b2415 0%, #21170f 25%, #17130f 52%, #0d0b09 100%);
  --gradient-fallback: radial-gradient(circle at 70% 44%, #684325 0%, #2c1c11 28%, #17130f 64%);
  --gradient-shade: linear-gradient(90deg, #17130ff2 0%, #17130fc4 35%, #17130f38 65%, #17130f1a 100%);
  --gradient-card: linear-gradient(145deg, #2a221b 0%, #211b16 100%);
  --gradient-glow: radial-gradient(circle, #dda45f24 0%, #dda45f00 70%);
  --gradient-petal: radial-gradient(ellipse at 30% 25%, #f3eadb12, #dda45f08 55%, #f3eadb00 75%);
  --gradient-grain: repeating-radial-gradient(circle at 17% 32%, #f3eadb18 0 0.45px, #00000000 0.8px 3px);
  --hero-media-filter: saturate(1.12) sepia(0.06) brightness(1.02);
}

/* ---------- Theme picker ---------- */
.theme-picker { position: relative; }
.theme-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--transparent);
  color: var(--cream-soft);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}
.theme-picker__toggle::-webkit-details-marker { display: none; }
.theme-picker__toggle:hover { border-color: var(--amber); color: var(--cream); }
.theme-picker__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.theme-picker__dot {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink) 48%, var(--amber) 48%);
}
.theme-picker__menu {
  position: absolute;
  z-index: 25;
  top: calc(100% + var(--space-3));
  right: 0;
  width: 15rem;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  background: var(--surface);
  box-shadow: 0 1.25rem 3rem var(--shadow);
}
.theme-picker__title {
  margin: 0 0 var(--space-2);
  padding-inline: var(--space-2);
  color: var(--cream-soft);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.theme-picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  color: var(--cream-soft);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-soft);
}
.theme-picker__option:hover { background: var(--surface-raised); }
.theme-picker__option:has(input:checked) { background: var(--surface-raised); color: var(--cream); }
.theme-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.theme-picker__option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-picker__swatch {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.theme-picker__swatch[data-swatch="christmas"] { background: linear-gradient(135deg, #12201a 45%, #c9a227 45%, #c9a227 55%, #b8452f 55%); }
.theme-picker__swatch[data-swatch="ember"] { background: linear-gradient(135deg, #211b16 45%, #dda45f 45%); }
.theme-picker__swatch[data-swatch="linen"] { background: linear-gradient(135deg, #f2e6d3 45%, #8a4a1c 45%); }
.theme-picker__swatch[data-swatch="rose"] { background: linear-gradient(135deg, #241a1d 45%, #d98a92 45%); }
.theme-picker__swatch[data-swatch="sea"] { background: linear-gradient(135deg, #15221f 45%, #7fc2a8 45%); }
.theme-picker__swatch[data-swatch="plum"] { background: linear-gradient(135deg, #1e1826 45%, #b48ad9 45%); }
.theme-picker__name { flex: 1; display: flex; align-items: baseline; gap: var(--space-2); }
.theme-picker__name small { color: var(--cream-muted); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.theme-picker__tick { color: var(--amber); opacity: 0; }
.theme-picker__option:has(input:checked) .theme-picker__tick { opacity: 1; }

@media (max-width: 48rem) {
  .theme-picker__label { display: none; }
  .theme-picker__toggle { padding: 0.45rem; }
  .theme-picker__menu { width: 13rem; }
}