/* =========================================================
   FaceUpper by Aga Nowak — Design Tokens
   Modern wellness × editorial elegance × quiet tech
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

:root {
  /* ---------- COLOR — Core ----------
     Bloom is the brand rose, distilled from the FaceUpper logo.
     Ink is a warm near-black; Bone is the warm off-white the
     entire system breathes against.                         */

  --fu-bloom-50:  #FBEFEC;
  --fu-bloom-100: #F6DDD6;
  --fu-bloom-200: #EFC4B9;
  --fu-bloom-300: #E5A89C;  /* Brand rose — logo wordmark */
  --fu-bloom-400: #D88B7D;
  --fu-bloom-500: #C97160;  /* Primary action */
  --fu-bloom-600: #A85948;
  --fu-bloom-700: #7E4334;

  /* Warm neutrals */
  --fu-ink-900:   #1A1614;  /* Primary text */
  --fu-ink-800:   #2B2521;
  --fu-ink-700:   #4A413B;
  --fu-slate-600: #6B635E;  /* Secondary text */
  --fu-slate-500: #8C847E;  /* Tertiary text */
  --fu-slate-400: #B5ADA7;  /* Muted / placeholder */
  --fu-mist-300:  #DCD4CE;  /* Hairlines */
  --fu-mist-200:  #E8E0DA;  /* Dividers */
  --fu-cream-100: #F2EBE5;  /* Subtle layer */
  --fu-bone-50:   #FAF7F4;  /* Page background */
  --fu-paper:     #FFFFFF;

  /* Accents — used sparingly */
  --fu-sage-500:  #8FA293;  /* Calm / wellness */
  --fu-sage-100:  #E4EAE3;
  --fu-clay-500:  #B8856A;  /* Warm earthy contrast */
  --fu-glow-500:  #F4D7AF;  /* Skin-glow highlight */
  --fu-plum-700:  #4D3A4F;  /* Editorial depth */

  /* Data / status (WHOOP-quiet) */
  --fu-good-500:  #6E8E72;
  --fu-warn-500:  #D4A24A;
  --fu-alert-500: #B65046;

  /* Semantic — prefer these over raw tokens */
  --fu-bg:           var(--fu-bone-50);
  --fu-surface:      var(--fu-paper);
  --fu-surface-alt:  var(--fu-cream-100);
  --fu-surface-deep: var(--fu-ink-900);
  --fu-text:         var(--fu-ink-900);
  --fu-text-muted:   var(--fu-slate-600);
  --fu-text-subtle:  var(--fu-slate-500);
  --fu-text-invert:  var(--fu-bone-50);
  --fu-border:       var(--fu-mist-200);
  --fu-border-strong:var(--fu-mist-300);
  --fu-accent:       var(--fu-bloom-500);
  --fu-accent-soft:  var(--fu-bloom-100);
  --fu-on-accent:    #FFFFFF;

  /* ---------- TYPE ----------
     Newsreader: contemporary editorial serif — round, warm, readable.
     Used for display and emotional moments. Italic for the soft beat.
     DM Sans: humanist geometric — generous x-height, friendly,
     legible at 14–16px for the 40+ reader. One sans does everything:
     UI, body, and metrics (via tabular figures). No mono. */
  --fu-font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --fu-font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --fu-font-mono:    "DM Sans", -apple-system, sans-serif; /* fall-through alias — use with tabular figures */

  --fu-text-3xs: 11px;
  --fu-text-2xs: 12px;
  --fu-text-xs:  13px;
  --fu-text-sm:  14px;
  --fu-text-md:  16px;
  --fu-text-lg:  18px;
  --fu-text-xl:  22px;
  --fu-text-2xl: 28px;
  --fu-text-3xl: 36px;
  --fu-text-4xl: 48px;
  --fu-text-5xl: 64px;
  --fu-text-6xl: 88px;
  --fu-text-7xl: 120px;

  --fu-leading-tight: 1.05;
  --fu-leading-snug:  1.18;
  --fu-leading-body:  1.5;
  --fu-leading-loose: 1.65;

  --fu-track-display: -0.015em;
  --fu-track-tight:   -0.01em;
  --fu-track-normal:  0em;
  --fu-track-eyebrow: 0.16em;
  --fu-track-mono:    0.02em;

  /* ---------- SPACING — 4px base ---------- */
  --fu-space-0: 0;
  --fu-space-1: 4px;
  --fu-space-2: 8px;
  --fu-space-3: 12px;
  --fu-space-4: 16px;
  --fu-space-5: 20px;
  --fu-space-6: 24px;
  --fu-space-7: 32px;
  --fu-space-8: 40px;
  --fu-space-9: 56px;
  --fu-space-10: 72px;
  --fu-space-11: 96px;
  --fu-space-12: 128px;

  /* ---------- RADIUS ---------- */
  --fu-radius-xs: 4px;
  --fu-radius-sm: 8px;
  --fu-radius-md: 12px;
  --fu-radius-lg: 18px;
  --fu-radius-xl: 24px;
  --fu-radius-2xl: 32px;
  --fu-radius-pill: 999px;

  /* ---------- SHADOWS — soft, warm, low-contrast ---------- */
  --fu-shadow-xs: 0 1px 2px rgba(26, 22, 20, 0.04);
  --fu-shadow-sm: 0 2px 6px rgba(26, 22, 20, 0.05), 0 1px 2px rgba(26, 22, 20, 0.04);
  --fu-shadow-md: 0 8px 24px rgba(26, 22, 20, 0.07), 0 2px 6px rgba(26, 22, 20, 0.04);
  --fu-shadow-lg: 0 24px 60px rgba(26, 22, 20, 0.10), 0 6px 16px rgba(26, 22, 20, 0.05);
  --fu-shadow-glow: 0 16px 48px rgba(201, 113, 96, 0.25);
  --fu-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- MOTION ---------- */
  --fu-ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --fu-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --fu-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --fu-dur-fast:   140ms; /* @kind other */
  --fu-dur-base:   240ms; /* @kind other */
  --fu-dur-slow:   480ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --fu-container:   1240px;
  --fu-container-narrow: 880px;
  --fu-gutter:      32px;
}

/* ---------- DARK / NIGHT MODE — WHOOP-quiet ----------
   Rooted in plum-ink, brand rose for accents only.        */
[data-theme="night"] {
  --fu-bg:          #14110F;
  --fu-surface:     #1C1815;
  --fu-surface-alt: #251F1B;
  --fu-surface-deep:#0B0908;
  --fu-text:        #F2EBE5;
  --fu-text-muted:  #B5ADA7;
  --fu-text-subtle: #8C847E;
  --fu-text-invert: #1A1614;
  --fu-border:      #2E2722;
  --fu-border-strong:#3D342E;
  --fu-accent:      var(--fu-bloom-300);
  --fu-accent-soft: rgba(229, 168, 156, 0.16);
  --fu-on-accent:   #1A1614;
  --fu-shadow-md:   0 8px 24px rgba(0,0,0,0.4);
  --fu-shadow-lg:   0 24px 60px rgba(0,0,0,0.5);
}

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

html, body {
  margin: 0;
  background: var(--fu-bg);
  color: var(--fu-text);
  font-family: var(--fu-font-sans);
  font-size: var(--fu-text-md);
  line-height: var(--fu-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- TYPE UTILITY CLASSES ---------- */
.fu-display    { font-family: var(--fu-font-display); font-weight: 400; line-height: var(--fu-leading-tight); letter-spacing: var(--fu-track-display); }
.fu-display em { font-style: italic; font-weight: 300; }

.fu-h1 { font-family: var(--fu-font-display); font-size: clamp(48px, 7vw, 96px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 400; margin: 0; }
.fu-h2 { font-family: var(--fu-font-display); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.06;  letter-spacing: -0.018em; font-weight: 400; margin: 0; }
.fu-h3 { font-family: var(--fu-font-display); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.14;  letter-spacing: -0.012em; font-weight: 400; margin: 0; }

.fu-title    { font-family: var(--fu-font-sans); font-size: var(--fu-text-2xl); line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.fu-subtitle { font-family: var(--fu-font-sans); font-size: var(--fu-text-lg);  line-height: 1.4;  font-weight: 500; }
.fu-body     { font-family: var(--fu-font-sans); font-size: var(--fu-text-md);  line-height: 1.6; font-weight: 400; color: var(--fu-text-muted); }
.fu-body-lg  { font-family: var(--fu-font-sans); font-size: var(--fu-text-lg);  line-height: 1.55;  font-weight: 400; color: var(--fu-text-muted); }
.fu-caption  { font-family: var(--fu-font-sans); font-size: var(--fu-text-sm);  line-height: 1.5; color: var(--fu-text-subtle); }

.fu-eyebrow {
  font-family: var(--fu-font-sans);
  font-size: var(--fu-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--fu-track-eyebrow);
  font-weight: 500;
  color: var(--fu-text-muted);
}

.fu-mono { font-family: var(--fu-font-sans); letter-spacing: var(--fu-track-mono); font-feature-settings: "tnum" 1, "lnum" 1; }

.fu-metric {
  font-family: var(--fu-font-sans);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- CORE COMPONENTS ---------- */

/* Buttons */
.fu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--fu-radius-pill);
  border: 1px solid transparent;
  background: var(--fu-ink-900);
  color: var(--fu-text-invert);
  font-family: var(--fu-font-sans);
  font-size: var(--fu-text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform var(--fu-dur-fast) var(--fu-ease-out), background var(--fu-dur-base) var(--fu-ease-out), box-shadow var(--fu-dur-base) var(--fu-ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.fu-btn:hover  { transform: translateY(-1px); box-shadow: var(--fu-shadow-md); }
.fu-btn:active { transform: translateY(0); }
/* Page stylesheets set a:hover { color: bloom-600 }; every variant restates its text colour
   for hover/focus/active at (0,2,0) so a link-styled button never matches its own background. */
.fu-btn:hover, .fu-btn:focus-visible, .fu-btn:active { color: var(--fu-text-invert); }

.fu-btn--primary { background: var(--fu-bloom-500); color: #fff; }
.fu-btn--primary:hover { background: var(--fu-bloom-600); box-shadow: var(--fu-shadow-glow); }
.fu-btn--primary:hover, .fu-btn--primary:focus-visible, .fu-btn--primary:active { color: #fff; }

.fu-btn--ink     { background: var(--fu-bloom-500); color: #FFFFFF; }
.fu-btn--ink:hover { background: var(--fu-bloom-600); }
.fu-btn--ink:hover, .fu-btn--ink:focus-visible, .fu-btn--ink:active { color: #FFFFFF; }
.fu-btn--ghost   { background: transparent; color: var(--fu-text); border-color: var(--fu-border-strong); }
.fu-btn--ghost:hover { background: var(--fu-cream-100); }
.fu-btn--ghost:hover, .fu-btn--ghost:focus-visible, .fu-btn--ghost:active { color: var(--fu-text); }
.fu-btn--soft    { background: var(--fu-bloom-100); color: var(--fu-bloom-700); }
.fu-btn--soft:hover { background: var(--fu-bloom-200); }
.fu-btn--soft:hover, .fu-btn--soft:focus-visible, .fu-btn--soft:active { color: var(--fu-bloom-700); }
.fu-btn--link    { background: transparent; color: var(--fu-text); padding: 0; height: auto; border-bottom: 1px solid currentColor; border-radius: 0; }
.fu-btn--link:hover, .fu-btn--link:focus-visible, .fu-btn--link:active { color: var(--fu-bloom-600); }

.fu-btn--sm { height: 36px; padding: 0 16px; font-size: var(--fu-text-xs); }
.fu-btn--lg { height: 56px; padding: 0 28px; font-size: var(--fu-text-md); }

.fu-price-label { display: inline-flex; align-items: center; white-space: nowrap; }
.fu-price-label__separator {
  flex: 0 0 1px;
  height: 1.6em;
  margin-inline: 10px;
  background: currentColor;
  opacity: .75;
}
.fu-btn--priced { font-variant-numeric: tabular-nums; }
/* Keep the product name and price together, including longer Italian labels. */
@media (max-width: 380px) {
  .fu-btn--priced { padding-inline: 12px; font-size: 14px; }
}

/* Badge */
.fu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--fu-radius-pill);
  background: var(--fu-bloom-100);
  color: var(--fu-bloom-700);
  font-size: var(--fu-text-2xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fu-badge--ink   { background: var(--fu-ink-900); color: var(--fu-bone-50); }
.fu-badge--sage  { background: var(--fu-sage-100); color: #4A5C4F; }
.fu-badge--ghost { background: transparent; color: var(--fu-text-muted); border: 1px solid var(--fu-border-strong); }
.fu-badge .fu-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Card */
.fu-card {
  background: var(--fu-surface);
  border: 1px solid var(--fu-border);
  border-radius: var(--fu-radius-xl);
  padding: 28px;
  transition: box-shadow var(--fu-dur-base) var(--fu-ease-out), transform var(--fu-dur-base) var(--fu-ease-out);
}
.fu-card--hover:hover { box-shadow: var(--fu-shadow-md); transform: translateY(-2px); }
.fu-card--quiet { background: var(--fu-cream-100); border-color: transparent; }
.fu-card--ink   { background: var(--fu-ink-900); color: var(--fu-bone-50); border-color: transparent; }

/* Input */
.fu-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--fu-border-strong);
  border-radius: var(--fu-radius-md);
  background: var(--fu-surface);
  color: var(--fu-text);
  font-family: var(--fu-font-sans);
  font-size: var(--fu-text-md);
  outline: none;
  transition: border-color var(--fu-dur-base), box-shadow var(--fu-dur-base);
}
.fu-input::placeholder { color: var(--fu-slate-400); }
.fu-input:focus { border-color: var(--fu-bloom-500); box-shadow: 0 0 0 4px var(--fu-bloom-100); }

/* Divider line — editorial hairline */
.fu-rule { height: 1px; background: var(--fu-border-strong); border: 0; margin: 0; }

/* Container */
.fu-container { max-width: var(--fu-container); margin: 0 auto; padding: 0 var(--fu-gutter); }
.fu-container--narrow { max-width: var(--fu-container-narrow); margin: 0 auto; padding: 0 var(--fu-gutter); }

/* Navigation sheet groups (homepage + product pages) */
.sheet {
  max-height: min(78vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet__g + .sheet__g {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--fu-border-strong);
}
.sheet__h {
  margin: 6px 0 2px;
  font-family: var(--fu-font-sans);
  font-size: var(--fu-text-3xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fu-gold-500);
}
@media (max-width: 900px) {
  .sheet__h { margin: 4px 0 0; }
  .sheet__g + .sheet__g { margin-top: 2px; padding-top: 8px; }
}

/* ---------- Shared site footer (rendered by js/footer.js) ---------- */
.fu-foot {
  background: var(--fu-cream-100);
  border-top: 1px solid var(--fu-border);
  padding: clamp(36px, 5vw, 64px) clamp(18px, 4vw, 56px);
  font-family: var(--fu-font-sans);
}
.fu-foot__in {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 18px; justify-items: center; text-align: center;
}
.brand img,
.fu-foot__brand img {
  display: block;
  height: 32px;
  width: auto;
  max-width: min(180px, 46vw);
}
.fu-foot__brand { margin: 0; }
.fu-foot__links, .fu-foot__social {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
}
.fu-foot__links a, .fu-foot__social a {
  color: var(--fu-text-muted); font-size: 13.5px; letter-spacing: .03em;
  text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.fu-foot__links a:hover, .fu-foot__social a:hover { color: var(--fu-bloom-600); border-color: currentColor; }
.fu-foot__legal { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--fu-text-subtle); }
.fu-foot__credit { margin: 0; font-size: 11.5px; letter-spacing: .02em; color: var(--fu-text-subtle); }
.fu-foot__credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--fu-border-strong); padding-bottom: 1px; }
.fu-foot__credit a:hover { color: var(--fu-bloom-600); border-color: currentColor; }

/* ---------- Sticky buy bar (js/sticky-buy.js) ---------- */
.fu-sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  transform: translateY(-110%);
  transition: transform var(--fu-dur-base) var(--fu-ease-out);
  background: var(--fu-surface);
  border-bottom: 1px solid var(--fu-border);
  box-shadow: var(--fu-shadow-sm);
}
.fu-sticky.is-on { transform: translateY(0); }
.fu-sticky__in {
  max-width: 1180px; margin: 0 auto;
  padding: 10px clamp(18px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.fu-sticky__label { margin: 0; font-family: var(--fu-font-display); font-size: 16.5px; letter-spacing: -.01em; color: var(--fu-text); white-space: nowrap; }
.fu-sticky__price { margin-left: 8px; font-family: var(--fu-font-sans); font-size: 13px; color: var(--fu-text-muted); font-variant-numeric: tabular-nums; }
.fu-sticky .fu-btn { height: 40px; padding: 0 18px; font-size: var(--fu-text-xs); }
.fu-sticky .fu-btn--primary:hover, .fu-sticky .fu-btn--primary:focus-visible, .fu-sticky .fu-btn--primary:active { color: #fff; }
@media (max-width: 560px) {
  .fu-sticky__label { display: none; }
  .fu-sticky .fu-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fu-sticky { transition: none; }
}