/* ==========================================================================
   JSYAS Baby — theme layer
   Loaded last. Re-points the inherited design system (tokens, type, surfaces)
   from PESU's dark, gilded home-decor look to something light, warm and
   friendly for a baby shop, without rewriting every component.
   ========================================================================== */

:root {
  /* Surface & ink — cream paper, deep blueberry ink */
  --ink:       #2B2A4C;
  --ink-2:     #35345A;
  --ink-3:     #424170;
  --basalt:    #5A587E;
  --alabaster: #FFFAF3;
  --gypsum:    #FCF1E4;
  --dune:      #F6E3D0;
  --sand:      #EBCDB2;

  /* Accents — peach, butter, sage, sky */
  --gilt:      #EE8A6E;
  --gilt-soft: #F7B9A3;
  --gilt-deep: #C9614A;
  --clay:      #E0A15E;
  --palm:      #7FA88A;
  --butter:    #F7D98B;
  --sky:       #A9CBEA;
  --sage:      #B7D3B8;
  --blush:     #F6C9CF;

  --bg:        var(--alabaster);
  --fg:        var(--ink);
  --fg-muted:  rgba(43, 42, 76, 0.66);
  --fg-faint:  rgba(43, 42, 76, 0.38);
  --line:      rgba(43, 42, 76, 0.14);
  --line-soft: rgba(43, 42, 76, 0.07);
  --accent:    var(--gilt-deep);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius:    18px;
  --radius-sm: 12px;
}

.on-dark {
  --bg:        var(--ink);
  --fg:        #FFF7EE;
  --fg-muted:  rgba(255, 247, 238, 0.74);
  --fg-faint:  rgba(255, 247, 238, 0.4);
  --line:      rgba(255, 247, 238, 0.18);
  --line-soft: rgba(255, 247, 238, 0.08);
  --accent:    var(--butter);
}

body { font-weight: 400; }
.display, .display em { font-weight: 500; }
.display { letter-spacing: -0.02em; line-height: 1.02; }
.display em { color: var(--gilt-deep); font-style: italic; }
.on-dark .display em { color: var(--butter); }
.lede { font-weight: 400; }
.eyebrow { font-weight: 700; letter-spacing: 0.14em; color: var(--gilt-deep); }
.on-dark .eyebrow { color: var(--butter); }
.eyebrow::before { width: 1.25rem; height: 3px; border-radius: 3px; opacity: 0.7; }

::selection { background: var(--butter); color: var(--ink); }

/* Rounder, softer: tiles, photos, buttons */
.tile__media, .surface, .manifesto__media, .configure__preview,
.material-card > div, .journal-card .tile__media, .concierge__item,
.bespoke__step, .spotlight__object--photo img, .product-gallery img {
  border-radius: var(--radius);
}
.btn, .newsletter, .newsletter button, .field__input, .chip, .option {
  border-radius: 999px;
}

/* --- Wordmark & monogram ------------------------------------------------ */
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.wordmark small { font-family: var(--font-sans); font-weight: 700; font-size: 0.42em; letter-spacing: 0.18em; text-transform: uppercase; margin-left: 0.35em; color: var(--gilt-deep); vertical-align: 0.35em; }
.on-dark .wordmark small { color: var(--butter); }
.monogram { border-radius: 50%; background: var(--gilt); color: #fff; border: 0; }
.monogram span { font-family: var(--font-display); font-weight: 600; }

/* --- Age surfaces (were material swatches) ------------------------------ */
.age-newborn, .age-baby, .age-toddler, .age-kids, .age-all { --grain: 0.06; }
.age-newborn { --surface-base: #F9DDE1; background-image: radial-gradient(90% 70% at 25% 15%, #FFF3F4, transparent 62%), linear-gradient(150deg, #FBE7EA, #F3C7CF); }
.age-baby    { --surface-base: #FBEBC4; background-image: radial-gradient(90% 70% at 25% 15%, #FFF9E8, transparent 62%), linear-gradient(150deg, #FCF0CF, #F4D98E); }
.age-toddler { --surface-base: #D9E9DA; background-image: radial-gradient(90% 70% at 25% 15%, #F3FAF3, transparent 62%), linear-gradient(150deg, #E3F0E4, #B9D5BB); }
.age-kids    { --surface-base: #DCE9F7; background-image: radial-gradient(90% 70% at 25% 15%, #F4F9FF, transparent 62%), linear-gradient(150deg, #E5EFFA, #B3CDEB); }
.age-all     { --surface-base: #F6E3D0; background-image: radial-gradient(90% 70% at 25% 15%, #FFF8F0, transparent 62%), linear-gradient(150deg, #FBEADA, #EECDAE); }
.surface::before { background: radial-gradient(120% 85% at 18% 6%, rgba(255,255,255,0.28), transparent 55%); }

/* Product photography from the supplier sits on white; let it breathe. */
.tile__media img, .manifesto__media img, .configure__object img,
.material-card img, .journal-card img { mix-blend-mode: multiply; }

/* --- Hero: a soft morning sky instead of a desert night ------------------ */
.hero { background: linear-gradient(180deg, #FDEFE3 0%, #FFF6EC 55%, #FFFAF3 100%); color: var(--ink); min-height: min(100svh, 860px); }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.9; animation: blob-float 16s var(--ease-io) infinite; }
.hero__blob--peach  { width: 46vmin; height: 46vmin; left: -8vmin; top: 14%;  background: radial-gradient(circle at 35% 35%, #FBD3C3, #F4A98F); }
.hero__blob--butter { width: 30vmin; height: 30vmin; right: 6%;   top: 9%;   background: radial-gradient(circle at 35% 35%, #FFF0C2, #F6D27A); animation-delay: -5s; }
.hero__blob--sage   { width: 38vmin; height: 38vmin; right: -10vmin; bottom: 8%; background: radial-gradient(circle at 35% 35%, #DCEBDC, #A9CAAD); animation-delay: -9s; }
.hero__blob--sky    { width: 22vmin; height: 22vmin; left: 12%;   bottom: 10%; background: radial-gradient(circle at 35% 35%, #E3F0FB, #A9CBEA); animation-delay: -2s; }
@keyframes blob-float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-14px,0) scale(1.04); } }
.hero__cloud { position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 56px; opacity: 0.85; box-shadow: 0 10px 30px rgba(43,42,76,0.06); }
.hero__cloud::before, .hero__cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.hero__cloud::before { width: 70px; height: 70px; left: 28px; top: -34px; }
.hero__cloud::after  { width: 92px; height: 92px; left: 74px; top: -50px; }
.hero__cloud--a { left: 18%; top: 22%; transform: scale(0.8); animation: cloud-drift 40s linear infinite; }
.hero__cloud--b { right: 20%; bottom: 26%; transform: scale(0.6); animation: cloud-drift 55s linear infinite reverse; }
@keyframes cloud-drift { from { translate: -20px 0; } 50% { translate: 20px 0; } to { translate: -20px 0; } }

.hero__wordmark { font-size: clamp(3.2rem, 1.6rem + 7vw, 7.4rem); }
.hero__wordmark span { background: none; color: var(--ink); -webkit-background-clip: initial; background-clip: initial; }
.hero__wordmark span.hero__baby { color: var(--gilt-deep); font-style: italic; margin-left: 0.18em; }
.hero__tagline { color: var(--gilt-deep); font-weight: 700; }
.hero__sub { color: var(--fg-muted); font-size: var(--step-1); }
.hero__foot { color: var(--fg-muted); }
.hero__scroll i { background: linear-gradient(180deg, rgba(43,42,76,0.05), rgba(43,42,76,0.5)); }

.btn--light { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--light:hover { background: var(--gilt-deep); border-color: var(--gilt-deep); }
.on-dark .btn--light { background: var(--butter); color: var(--ink); border-color: var(--butter); }

/* Header over the hero: dark ink on cream, not cream on black */
body[data-header="overlay"] .header:not(.is-scrolled) { color: var(--ink); }
.header.is-scrolled, .header { --header-bg: rgba(255, 250, 243, 0.94); }

/* --- Ticker ------------------------------------------------------------- */
.ticker { background: var(--butter); color: var(--ink); border: 0; }

/* --- Dark bands become deep blueberry with a warm glow ------------------- */
.spotlight, .bespoke { background: var(--ink); }
.bespoke__bg { background: radial-gradient(90% 120% at 82% 20%, rgba(238,138,110,0.35), transparent 58%), linear-gradient(160deg, #2F2E55, #22213F) !important; }
.spotlight__halo { background: radial-gradient(circle, rgba(247,217,139,0.35), transparent 65%); }
.spotlight__object--photo img { background: #fff; padding: 6%; }

/* --- Footer ------------------------------------------------------------- */
.footer.on-dark { background: var(--ink); }

/* --- Trust strip under the hero --------------------------------------- */
.promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.promise__item { background: #fff; border-radius: var(--radius); padding: 1.1rem 1.25rem; display: flex; gap: 0.85rem; align-items: center; box-shadow: 0 6px 24px rgba(43,42,76,0.05); }
.promise__icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gypsum); }
.promise__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gilt-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.promise__item strong { display: block; font-weight: 800; font-size: var(--step-0); line-height: 1.2; }
.promise__item span { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.35; }
@media (max-width: 900px) { .promise { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .promise { grid-template-columns: 1fr; } }

/* Age picker labels */
.swatch.surface { border-radius: 50%; }
.swatch__label { font-weight: 700; }

/* Safety note on product pages */
.safety-note { background: var(--gypsum); border-radius: var(--radius-sm); padding: 1rem 1.15rem; font-size: var(--step--1); color: var(--fg-muted); }
.safety-note strong { color: var(--ink); }

/* --- Header on a light hero -------------------------------------------- */
.header { color: var(--ink); }
.header::before { background: linear-gradient(180deg, rgba(255,250,243,0.85), transparent); }
.header.is-solid { background: rgba(255, 250, 243, 0.94); }
.navlink { font-weight: 700; letter-spacing: 0.1em; }
.wordmark--hero   { letter-spacing: -0.02em; text-indent: 0; }
.wordmark--footer { letter-spacing: -0.02em; text-indent: 0; font-size: clamp(3rem, 11vw, 9rem); }
.wordmark--header { font-size: 1.55rem; }

/* Five categories sit in one row on wide screens */
@media (min-width: 1100px) { .collections__grid--five { grid-template-columns: repeat(5, 1fr); } }

/* Closed drawers sit just off-screen; on a light page their shadow showed as
   a grey band down the edge. Only cast it while the drawer is open. */
.drawer { box-shadow: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.drawer.is-open { box-shadow: -40px 0 80px rgba(43, 42, 76, 0.16); }
.drawer--left.is-open { box-shadow: 40px 0 80px rgba(43, 42, 76, 0.16); }