/* Direction: dark botanical perfumery — midnight green paper, antique gold, a fine high-contrast serif */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0a0f0c;
  --surface: #101912;
  --surface-2: #17231b;
  --border: #27372d;
  --border-strong: #545755;
  --ink: #ece6d8;
  --muted: #a3b2a7;
  --accent: #c8a96a;
  --accent-hover: #d0b680;
  --accent-ink: #0a0f0c;
  --accent-text: #d8bd82;
  --accent-strong: #c8a96a;
  --accent-soft: #343121;
  --accent-border: #5f5436;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c2817;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1e0b;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #311210;
  --danger-strong: #d16969;
  --chart-1: #c8a96a;
  --chart-2: #88d487;
  --chart-3: #19a8b4;
  --chart-4: #a0bdfb;
  --chart-5: #b874be;
  --chart-6: #ff9cb2;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --x-atm-default: #6f8f78;
  --x-note-bergamot: #c8d65a;
  --x-note-pink-pepper: #e0566b;
  --x-note-yuzu: #f2c94c;
  --x-note-cardamom: #5fb89a;
  --x-note-rose: #e87a9a;
  --x-note-jasmine: #f1e6c8;
  --x-note-iris: #8f7ae0;
  --x-note-fig-leaf: #7fa05a;
  --x-note-sandalwood: #d9a679;
  --x-note-vetiver: #7d8f4e;
  --x-note-amber: #e0892f;
  --x-note-oud: #a64f93;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #dddddd;
  --border-strong: #b6b7b6;
  --ink: #0a0f0c;
  --muted: #6c6f6d;
  --accent: #c8a96a;
  --accent-hover: #aa905a;
  --accent-ink: #0a0f0c;
  --accent-text: #796640;
  --accent-strong: #796640;
  --accent-soft: #f7f3ea;
  --accent-border: #e6d8bc;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #ae9052;
  --chart-2: #25a474;
  --chart-3: #1e89a8;
  --chart-4: #8687df;
  --chart-5: #9f5ca4;
  --chart-6: #da748c;
}

@property --atm-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --atm-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --atm-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }

html { scroll-behavior: smooth; }
html.reduced-motion { scroll-behavior: auto; }

.rise { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.24s; }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes slide-in { from { transform: translateX(40px); } to { transform: none; } }
@keyframes pop-in { from { transform: translateY(14px) scale(0.985); } to { transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.arch { border-radius: 999px 999px var(--radius-card) var(--radius-card); overflow: hidden; }

/* catalog: editorial stagger */
@media (min-width: 1024px) {
  .catalog > :nth-child(3n + 2) { margin-top: 3.5rem; }
}
.card-photo img { transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card-photo:hover img, .card-photo:focus-visible img { transform: scale(1.05); }

/* atelier */
.atelier {
  --atm-1: var(--x-atm-default);
  --atm-2: var(--x-atm-default);
  --atm-3: var(--x-atm-default);
  background:
    radial-gradient(60% 50% at 12% 8%, color-mix(in srgb, var(--atm-1) 28%, transparent), transparent 70%),
    radial-gradient(55% 55% at 88% 38%, color-mix(in srgb, var(--atm-2) 26%, transparent), transparent 70%),
    radial-gradient(75% 55% at 50% 100%, color-mix(in srgb, var(--atm-3) 34%, transparent), transparent 70%),
    var(--canvas);
  transition: --atm-1 0.9s ease, --atm-2 0.9s ease, --atm-3 0.9s ease;
}
html.reduced-motion .atelier { transition: none; }

.sky {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
@media (min-width: 768px) { .sky { aspect-ratio: 16 / 11; } }
@media (min-width: 1024px) { .sky { aspect-ratio: 6 / 5; } }
.sky-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sky-lines line { vector-effect: non-scaling-stroke; }
.sky-lines .faint { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
.sky-lines .path { stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 4px currentColor); }

.col-title {
  position: absolute;
  top: 0.9rem;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.node {
  position: absolute;
  transform: translate(-50%, -11px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.35rem;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  outline-offset: 2px;
}
.node-star {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 28%, transparent);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.node-label { font-size: 0.7rem; line-height: 1.1; text-align: center; white-space: nowrap; transition: color 0.2s; }
@media (min-width: 768px) { .node-label { font-size: 0.82rem; } }
.node:hover .node-star { transform: scale(1.18); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.node:hover .node-label { color: var(--ink); }
.node:focus-visible { outline: 2px solid var(--accent); }
.node.on .node-star {
  background: var(--c);
  transform: scale(1.2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 24%, transparent), 0 0 28px var(--c);
}
.node.on .node-label { color: var(--ink); font-weight: 600; }
.node:active .node-star { transform: scale(0.95); }

.stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bottle {
  position: absolute;
  left: 50%;
  bottom: 4%;
  height: 72%;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--atm-3) 45%, transparent));
}
.bottle .glass { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1.5; }
.bottle .cap { fill: var(--accent); }
.bottle .neck { fill: color-mix(in srgb, var(--accent) 70%, var(--canvas)); }
.bottle .s1 { stop-color: var(--atm-2); }
.bottle .s2 { stop-color: var(--atm-3); }
.bottle .shine { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.bottle .label { fill: var(--ink); }
.bottle text { fill: var(--canvas); font-family: var(--font-body); text-anchor: middle; }
.bottle .lbl-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.bottle .lbl-small { font-size: 4.6px; letter-spacing: 0.18em; text-transform: uppercase; }
.bottle .lbl-note { font-size: 5.2px; letter-spacing: 0.1em; text-transform: uppercase; }
.bottle .lbl-rule { stroke: var(--atm-3); stroke-width: 1.2; }
.bottle text, .bottle .liquid { transition: opacity 0.3s; }
.stage:not(.is-ready) .bottle { animation: bob 7s ease-in-out infinite; }
html.reduced-motion .bottle { animation: none !important; }

.step-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--border); transition: background 0.3s, transform 0.3s; }
.step-dot.on { background: var(--accent); transform: scale(1.25); }

/* dialogs */
.sc-dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 0;
  max-width: none;
}
.sc-dialog::backdrop { background: color-mix(in srgb, black 62%, transparent); }
.drawer {
  margin: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(27rem, 100vw);
  border-width: 0 0 0 1px;
  border-radius: 0;
}
.drawer[open] { animation: slide-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet {
  width: min(58rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  border-radius: var(--radius-card);
  overflow: auto;
}
.sheet[open] { animation: pop-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.reduced-motion .drawer[open], html.reduced-motion .sheet[open], html.reduced-motion .rise { animation: none; }

.size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.size-opt span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}
.size-opt span:hover { border-color: var(--accent); }
.size-opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.size-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; }
.qty button { width: 2rem; height: 2rem; border-radius: 999px; font-size: 1.05rem; line-height: 1; }
.qty button:hover { background: var(--surface-2); }
.qty button:focus-visible { outline: 2px solid var(--accent); }
.qty output { min-width: 1.5rem; text-align: center; font-size: 0.9rem; }

.swatch { width: 100%; height: 100%; }

.sc-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 0);
  z-index: 60;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  max-width: calc(100vw - 2rem);
}
.sc-toast[hidden] { display: none; }