/* ==========================================================================
   Janković — base: tokens, reset, typography, themes, buttons, form controls
   ========================================================================== */

:root {
  /* Palette — the shop's own materials: ganache, raspberry (the logo), caramel-gold, fondant pink, whipped cream */
  --ganache: #2A140D;
  --ganache-2: #1E0D08;
  --ganache-3: #3B1E14;
  --kakao: #5A2E1E;
  --malina: #C81F43;
  --malina-hi: #E8395B;
  --karamel: #C99A5B;
  --karamel-hi: #E4C08A;
  --fondan: #F6D3D9;
  --fondan-2: #EFBFC9;
  --slag: #FBF3EE;
  --slag-2: #F2E3DA;
  --ivory: #F4ECE0;
  --ivory-2: #E9DCC8;
  --cream: #F7EBDD;
  --gold-ink: #8C6428;

  /* Type */
  --f-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-sans: 'Onest', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fs-h1: clamp(3rem, 1.4rem + 6.4vw, 8.75rem);
  --fs-h2: clamp(2.2rem, 1.25rem + 3.6vw, 5rem);
  --fs-h3: clamp(1.45rem, 1.15rem + 1vw, 2.1rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.36rem);
  --fs-body: clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;

  /* Space — uneven on purpose */
  --gutter: clamp(1rem, 0.55rem + 2.4vw, 3rem);
  --space-2xl: clamp(7rem, 4rem + 10vw, 14rem);
  --space-xl: clamp(5rem, 3rem + 6vw, 9rem);
  --space-l: clamp(3rem, 2rem + 3vw, 5rem);
  --space-m: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
  --max: 1400px;

  --r-pill: 999px;
  --r-card: 26px;
  --r-dome: 999px 999px 26px 26px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-pour: cubic-bezier(0.65, 0, 0.25, 1);
  --t-fast: 180ms;
  --t-med: 450ms;

  --nav-h: 80px;

  /* The glaze edge used by buttons (sheet + drips), stretched to any width */
  --drip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 82' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V44L238.2 44C229.7 44 234.3 54.3 222.8 54.3C211.3 54.3 215.9 44 207.4 44L198.5 44C193.8 44 190.7 47.2 190.7 51.1L190.7 52.4C190.7 58.3 192.9 59.5 192.9 64.2C192.9 69.1 188.9 73.2 183.9 73.2C179 73.2 174.9 69.1 174.9 64.2C174.9 59.5 177.2 58.3 177.2 52.4L177.2 51.1C177.2 47.2 174 44 169.4 44L170 44C164.8 44 161.3 47 161.3 50.7L161.3 50.7C161.3 56.9 163.8 58.1 163.8 63.1C163.8 68.6 159.3 73.1 153.8 73.1C148.3 73.1 143.8 68.6 143.8 63.1C143.8 58.1 146.3 56.9 146.3 50.7L146.3 50.7C146.3 47 142.9 44 137.7 44L136.8 44C128.4 44 133 58.4 121.5 58.4C109.9 58.4 114.5 44 106.1 44L102 44C93.5 44 98.1 56.8 86.6 56.8C75.1 56.8 79.7 44 71.3 44L65.1 44C59.9 44 56.5 47.3 56.5 51.3L56.5 51.8C56.5 58.3 59 59.6 59 64.8C59 70.3 54.5 74.8 49 74.8C43.5 74.8 39 70.3 39 64.8C39 59.6 41.5 58.3 41.5 51.8L41.5 51.3C41.5 47.3 38 44 32.9 44L33.5 44C26.5 44 30.3 54.9 20.8 54.9C11.2 54.9 15 44 8 44L0 44Z'/%3E%3C/svg%3E");
}

/* Themes: each one is a material */
:root, [data-theme="ganache"] {
  --bg: var(--ganache);
  --bg-2: var(--ganache-3);
  --fg: var(--cream);
  --muted: #C2A897;
  --line: rgba(247, 235, 221, 0.13);
  --line-strong: rgba(247, 235, 221, 0.4);
  --accent: var(--karamel-hi);
  --hot: var(--malina-hi);
}
[data-theme="kakao"] {
  --bg: #24100A;
  --bg-2: #351A10;
  --fg: var(--cream);
  --muted: #C4A48C;
  --line: rgba(247, 235, 221, 0.13);
  --line-strong: rgba(247, 235, 221, 0.4);
  --accent: var(--karamel-hi);
  --hot: var(--malina-hi);
}
[data-theme="slag"] {
  --bg: var(--slag);
  --bg-2: var(--slag-2);
  --fg: var(--ganache);
  --muted: #7B5E52;
  --line: rgba(42, 20, 13, 0.12);
  --line-strong: rgba(42, 20, 13, 0.38);
  --accent: var(--malina);
  --hot: var(--malina);
}
[data-theme="fondan"] {
  --bg: var(--fondan);
  --bg-2: var(--fondan-2);
  --fg: var(--ganache);
  --muted: #7E4D52;
  --line: rgba(42, 20, 13, 0.13);
  --line-strong: rgba(42, 20, 13, 0.4);
  --accent: var(--malina);
  --hot: var(--malina);
}
[data-theme="ivory"] {
  --bg: var(--ivory);
  --bg-2: var(--ivory-2);
  --fg: var(--ganache);
  --muted: #7B6450;
  --line: rgba(42, 20, 13, 0.12);
  --line-strong: rgba(42, 20, 13, 0.38);
  --accent: var(--gold-ink);
  --hot: var(--malina);
}
[data-theme="malina"] {
  --bg: var(--malina);
  --bg-2: #B0173A;
  --fg: #FFF4F0;
  --muted: rgba(255, 244, 240, 0.78);
  --line: rgba(255, 244, 240, 0.22);
  --line-strong: rgba(255, 244, 240, 0.6);
  --accent: var(--karamel-hi);
  --hot: #FFF4F0;
}
[data-theme] { background-color: var(--bg); color: var(--fg); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--malina); color: #fff; }

[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 400;
  padding: 0.7rem 1.1rem; border-radius: var(--r-pill); background: var(--malina); color: #fff;
  transform: translateY(-180%); transition: transform var(--t-fast);
}
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

/* Typography — Fraunces at full softness: letters like piped buttercream */
.h1, .h2, .h3, .display {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-weight: 340;
  letter-spacing: -0.02em;
}
.h1 { font-size: var(--fs-h1); line-height: 0.92; }
.h2 { font-size: var(--fs-h2); line-height: 0.98; }
.h3 { font-size: var(--fs-h3); line-height: 1.08; font-weight: 400; }
.h1 em, .h2 em, .h3 em, .display em {
  font-style: italic; font-weight: 300; color: var(--accent);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 36ch; }
.muted { color: var(--muted); }
.label {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.label::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); flex: none; }

/* Wordmark (Damion outlines) */
.wordmark { width: 100%; height: auto; overflow: visible; }
.wordmark path { fill: currentColor; }

/* Links */
.link-u {
  position: relative; display: inline-block; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-med) var(--ease-out);
}
.link-u:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Buttons — pills; on hover the fill pours in from the top, drips first */
.btn {
  --b-bg: transparent; --b-fg: var(--fg); --b-line: var(--line-strong); --b-fill: var(--fg); --b-fill-fg: var(--bg);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 54px; padding: 0.85rem 1.7rem; border-radius: var(--r-pill);
  background: var(--b-bg); color: var(--b-fg); box-shadow: inset 0 0 0 1px var(--b-line);
  font-size: 0.96rem; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap;
  transition: color 300ms var(--ease-out) 120ms, box-shadow var(--t-med) var(--ease-out), transform var(--t-fast);
}
.btn::before {
  content: ''; position: absolute; left: -2px; right: -2px; top: 0; height: 190%; z-index: -1;
  background: var(--b-fill);
  -webkit-mask: var(--drip-mask) 0 100% / 100% 100% no-repeat; mask: var(--drip-mask) 0 100% / 100% 100% no-repeat;
  transform: translateY(-101%); transition: transform 650ms var(--ease-pour);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--b-fill-fg); box-shadow: inset 0 0 0 1px transparent; }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--sm { min-height: 44px; padding: 0.6rem 1.25rem; font-size: 0.88rem; }
.btn--malina { --b-bg: var(--malina); --b-fg: #fff; --b-line: transparent; --b-fill: var(--ganache); --b-fill-fg: var(--cream); }
[data-theme="ganache"] .btn--malina, [data-theme="kakao"] .btn--malina { --b-fill: var(--cream); --b-fill-fg: var(--ganache); }
.btn--cream { --b-bg: var(--cream); --b-fg: var(--malina); --b-line: transparent; --b-fill: var(--ganache); --b-fill-fg: var(--cream); }
.btn--gold { --b-bg: var(--ganache); --b-fg: var(--karamel-hi); --b-line: transparent; --b-fill: var(--karamel); --b-fill-fg: var(--ganache); }
.btn--line { --b-fill: var(--fg); --b-fill-fg: var(--bg); }
.btn .arrow { transition: transform var(--t-med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Form controls */
.field { display: grid; gap: 0.45rem; }
.field > span:first-child { font-size: var(--fs-small); font-weight: 600; }
.opt { color: var(--muted); font-weight: 400; }
.input, .textarea {
  width: 100%; min-height: 54px; padding: 0.85rem 1.1rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); color: var(--ganache);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus { outline: none; border-color: var(--malina); box-shadow: 0 0 0 3px rgba(200, 31, 67, 0.16); }
.input[aria-invalid="true"] { border-color: var(--malina); box-shadow: 0 0 0 3px rgba(200, 31, 67, 0.16); }
.input::placeholder, .textarea::placeholder { color: #A8918A; }

/* Layout helpers */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}