:root {
  --bg: #fff5f7;
  --bg-2: #ffe9f0;
  --ink: #3d2c29;
  --ink-soft: #6b534e;
  --muted: #9a7f78;
  --line: rgba(61, 44, 41, 0.1);
  --pink: #ff6b8a;
  --pink-deep: #f04e72;
  --mint: #7dd3c0;
  --cream: #fff8f5;
  --cocoa: #5c4038;
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 4.25rem;
  --strip-h: 2.55rem;
  --radius: 1.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, #ffe0ea 0%, transparent 42%),
    radial-gradient(circle at 90% 0%, #dff7f1 0%, transparent 38%),
    radial-gradient(circle at 70% 90%, #ffe8d6 0%, transparent 40%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 550;
  margin: 0;
}

p {
  margin: 0;
}

#root {
  min-height: 100vh;
}

::selection {
  background: var(--pink);
  color: white;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.demo-strip {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: var(--strip-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--ink);
  color: var(--cream, #fff8f5);
}

.demo-strip a:hover {
  opacity: 0.8;
}

html.theme-luna {
  --bg: #f6efe6;
  --bg-2: #fff8f1;
  --ink: #2b1a12;
  --ink-soft: #6b534e;
  --muted: #9a7f78;
  --line: rgba(43, 26, 18, 0.1);
  --pink: #b85c38;
  --pink-deep: #9a4a2c;
  --mint: #e8d5c4;
  --cream: #fff8f1;
  --cocoa: #2b1a12;
  --font-display: "Fraunces", serif;
  --font-body: "Outfit", system-ui, sans-serif;
}

html.theme-noir {
  --bg: #09090b;
  --bg-2: #111114;
  --ink: #f5f0e8;
  --ink-soft: #d8d0c4;
  --muted: #9c9488;
  --line: rgba(203, 176, 122, 0.22);
  --pink: #cbb07a;
  --pink-deep: #e4d0a0;
  --mint: #cbb07a;
  --cream: #f5f0e8;
  --cocoa: #111114;
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

html.theme-fitlab {
  --bg: #0c0d0b;
  --bg-2: #111210;
  --ink: #f4f5f0;
  --ink-soft: #cfd2c8;
  --muted: #9aa094;
  --line: #262821;
  --pink: #c8ff3a;
  --pink-deep: #d8ff6a;
  --mint: #c8ff3a;
  --cream: #f4f5f0;
  --cocoa: #0c0d0b;
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

html.theme-casa {
  --bg: #f4f1ea;
  --bg-2: #ebe6db;
  --ink: #1c2420;
  --ink-soft: #4d5852;
  --muted: #667068;
  --line: #e4dfd4;
  --pink: #5f7d6c;
  --pink-deep: #4a6656;
  --mint: #d7e3db;
  --cream: #f7f4ee;
  --cocoa: #1c2420;
  --font-display: "Fraunces", serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}

html.theme-mira {
  --bg: #f7f1ea;
  --bg-2: #efe6dc;
  --ink: #1b1512;
  --ink-soft: #5b4e47;
  --muted: #6a5d56;
  --line: #ddd4cb;
  --pink: #1b1512;
  --pink-deep: #1b1512;
  --mint: #e8cfc4;
  --cream: #fffaf6;
  --cocoa: #1b1512;
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Jost", system-ui, sans-serif;
}

html.theme-nova {
  --bg: #081018;
  --bg-2: #0b1520;
  --ink: #e8eef5;
  --ink-soft: #b7c4d3;
  --muted: #8ea0b3;
  --line: rgba(94, 234, 212, 0.18);
  --pink: #5eead4;
  --pink-deep: #99f6e4;
  --mint: #5eead4;
  --cream: #e8eef5;
  --cocoa: #0e1a27;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

html.theme-luna body {
  background:
    radial-gradient(circle at 12% 8%, #f3e0d0 0%, transparent 42%),
    radial-gradient(circle at 90% 0%, #efe4d6 0%, transparent 38%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

html.theme-casa body {
  background:
    radial-gradient(circle at 12% 8%, #e4efe8 0%, transparent 42%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

html.theme-mira body {
  background:
    radial-gradient(circle at 12% 8%, #f3e4d8 0%, transparent 42%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

html.theme-noir body,
html.theme-fitlab body,
html.theme-nova body {
  background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 40%), var(--bg);
  color: var(--ink);
}

html.theme-noir .nav--solid,
html.theme-noir .nav--scrolled,
html.theme-fitlab .nav--solid,
html.theme-fitlab .nav--scrolled,
html.theme-nova .nav--solid,
html.theme-nova .nav--scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html.theme-fitlab .btn--pink {
  color: #111;
}

html.theme-nova .btn--pink {
  color: #04221c;
}

html.theme-mira .btn--pink,
html.theme-mira .nav__cart-count,
html.theme-mira .filters button.is-active {
  color: #fff;
}

html.theme-noir .drawer,
html.theme-fitlab .drawer,
html.theme-nova .drawer {
  background: color-mix(in srgb, var(--bg) 96%, var(--ink) 4%);
}

html.theme-noir .filters button,
html.theme-fitlab .filters button,
html.theme-nova .filters button,
html.theme-noir .footer,
html.theme-fitlab .footer,
html.theme-nova .footer {
  background: color-mix(in srgb, var(--bg-2) 90%, white 10%);
}

html.theme-fitlab .favorites,
html.theme-noir .favorites,
html.theme-nova .favorites {
  background: var(--bg-2);
  color: var(--ink);
}

html.theme-fitlab .favorites .section__head p,
html.theme-noir .favorites .section__head p,
html.theme-nova .favorites .section__head p,
html.theme-fitlab .favorites .meta,
html.theme-noir .favorites .meta,
html.theme-nova .favorites .meta {
  color: var(--muted);
}