/* ==========================================================================
   LUMÉA — base.css
   Reset, design tokens, typography, buttons, layout primitives.
   Tokens are lifted verbatim from design.md.
   ========================================================================== */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  /* App default. The hero opts back out to white; the announcement bar,
     marquee, and featured panel paint their own dark backgrounds. */
  background: var(--canvas-alt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* base + background */
  --black:      #0B0C10;
  --pure-black: #000000;
  --white:      #FFFFFF;
  --canvas:     #F8F9FA;
  --canvas-alt: #F2F2F2;
  --surface:    #F4F4F6;
  --lavender:   #E2E4EB;
  --mint:       #E0EAE6;   /* product image wells + eyebrow pill */
  --sky:        #E1E9F4;   /* newsletter card */
  --card:       #FCFBF8;   /* off-white product card on the grey section */

  /* text */
  --text:       #0D0D0D;
  --text-muted: #666666;
  --text-inv:   #FFFFFF;

  /* lines */
  --border:     #E0E0E0;
  --input-line: #CCCCCC;

  /* type */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  /* Hero headline only. Playfair Display is OFL — free for commercial use.
     Picked over Bodoni Moda because Didone contrast keeps hairlines thin at
     any weight; Playfair stays even and reads bold at 800. */
  --font-hero:    'Playfair Display', Georgia, serif;

  --fs-h1:      clamp(2.5rem, 1.6rem + 3.9vw, 4rem);      /* 40 → 64 */
  --fs-h2:      clamp(1.75rem, 1.3rem + 2vw, 2.5rem);     /* 28 → 40 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);   /* 20 → 24 */
  --fs-body:    clamp(0.9375rem, 0.91rem + 0.12vw, 1rem); /* 15 → 16 */
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-meta:    0.8125rem;
  --fs-price:   clamp(1rem, 0.96rem + 0.18vw, 1.125rem);

  /* layout */
  --container:  1500px;
  --gutter:     clamp(1rem, 0.5rem + 2vw, 2rem);
  /* Applied to every .section, so the gap between any two is 2x this. */
  --section-y:  clamp(2.5rem, 1.5rem + 3vw, 3.75rem);     /* 40 → 60 */
  /* Extra inset for content bands held narrower than the container.
     Collapses to 0 on mobile, where the width is already tight. */
  --band-inset: clamp(0rem, -2rem + 6vw, 5.5rem);

  /* shape */
  --radius:     8px;
  --radius-lg:  14px;
  --pill:       999px;
  --btn-radius: 10px;   /* buttons are squarish, not pills */

  /* motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur:        0.4s;

  /* chrome */
  --header-h:   64px;
  --bar-h:      38px;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow em { font-style: italic; letter-spacing: 0.06em; }

.lead {
  color: var(--text-muted);
  max-width: 52ch;
}

.meta {
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

.price {
  font-size: var(--fs-price);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--pure-black);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 12px 28px;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.btn:hover { transform: scale(1.03); opacity: 0.9; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover { --btn-bg: var(--surface); opacity: 1; }

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--text);
}

.btn--sm { padding: 9px 18px; font-size: 0.8125rem; }

/* Arrow nudge on any button holding an arrow icon */
.btn .btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Icon button ---------------------------------------------------------- */
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--btn-radius);
  color: var(--text);
  transition: background-color var(--dur) var(--ease-out);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }

/* --- Utilities ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -120%;
  z-index: 200;
  padding: 10px 20px;
  background: var(--black);
  color: var(--text-inv);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: translate var(--dur) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

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