/* LuxPeptides — Design Tokens
 * Gold / Black / Beige system. Edit these CSS variables to retone the brand.
 */

:root {
  /* Black surfaces — actual black, with weight */
  --ink-0: #000000;            /* deep ground */
  --ink-1: #07060a;            /* page bg */
  --ink-2: #0d0b10;            /* card bg */
  --ink-3: #15121a;            /* elevated */
  --ink-4: #221d29;            /* divider/edge */
  --ink-5: #3a3340;            /* muted line */

  /* Beige — aged parchment, warm sand */
  --beige-50: #f4ecdc;          /* primary text on black */
  --beige-100: #ebe0c9;         /* surface */
  --beige-200: #d8c8a8;         /* surface 2 */
  --beige-300: #b8a37c;         /* muted text */
  --beige-400: #8a7857;         /* low-contrast */

  /* Gold — antique gilt default. Tweakable. */
  --gold-50: #f6e6b6;
  --gold-100: #e9cf86;
  --gold-200: #d4b266;          /* primary gold */
  --gold-300: #b89149;          /* mid gold */
  --gold-400: #8a6a32;          /* deep gold edge */
  --gold-500: #5b451f;          /* shadow gold */

  /* Functional aliases */
  --bg: var(--ink-1);
  --bg-elev: var(--ink-2);
  --bg-elev-2: var(--ink-3);
  --rule: var(--ink-4);
  --rule-strong: var(--ink-5);

  --fg: var(--beige-50);
  --fg-muted: var(--beige-300);
  --fg-dim: var(--beige-400);

  --accent: var(--gold-200);
  --accent-strong: var(--gold-100);
  --accent-deep: var(--gold-400);

  --beige-surface: #d9c8a4;
  --beige-surface-text: #1a1410;

  /* Typography */
  --font-serif: "Cormorant Garamond", "EB Garamond", "Hoefler Text", "Garamond", serif;
  --font-sans: "Inter Tight", "Söhne", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Layout */
  --gutter: clamp(20px, 4vw, 64px);
  --max-w: 1480px;
  --rule-w: 1px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 220ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

/* Gold tone presets — the Tweaks panel swaps the data attribute on <html> */
html[data-gold="brushed-brass"] {
  --gold-50: #f3dca6;
  --gold-100: #e2c47a;
  --gold-200: #c69a4a;
  --gold-300: #9c773a;
  --gold-400: #6f5223;
  --gold-500: #3e2d11;
}
html[data-gold="champagne"] {
  --gold-50: #f8ecc6;
  --gold-100: #ecd99f;
  --gold-200: #d9bf83;
  --gold-300: #b8a06a;
  --gold-400: #8a774a;
  --gold-500: #574826;
}
/* default = antique-gilt (already in :root) */

/* Universal reset */
*, *::before, *::after { box-sizing: border-box; }
/* Kill the dim grey/blue translucent flash iOS+Android show on tap. We
   provide our own per-element :active states (gold tint, slight scale)
   so feedback is intentional, not a default-OS smudge. */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html {
  /* iOS Safari otherwise auto-shrinks text in landscape; pin it. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Honour in-page anchor jumps + js scroll-to-section without an
     abrupt teleport; respects prefers-reduced-motion automatically. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
  /* Horizontal-overflow safety net. `overflow-x: clip` (CSS 3 Overflow
     module, supported in Chrome 90+, Firefox 81+, Safari 16+) clips
     extra horizontal content WITHOUT creating a scroll container — so
     it doesn't hijack mouse-wheel scroll the way `overflow-x: hidden`
     can on Chromium. Older browsers that don't recognise `clip` ignore
     this declaration and inherit the default `visible` — meaning the
     safety net silently degrades, but individual elements responsible
     for actual overflow are already fixed at the source.
     IMPORTANT: do NOT set this on `html` — putting it on the root
     element creates a paint-containment boundary that interferes with
     `position: sticky` (used by the site header) on some browsers. */
  overflow-x: clip;
  /* Prevent overscroll from bouncing the whole page beyond its bounds
     on iOS Safari, which can briefly reveal whatever's behind.
     Does NOT prevent normal scrolling on any platform. */
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
/* Make every image and embed responsive by default. height:auto preserves
   aspect ratio when max-width clamps the displayed width. */
img, picture, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
/* SVG width:100% containers like the X-emblem in the chrome should keep
   their author-set sizing — only assets that need to scale opt-in via
   explicit width/height attrs. */
svg[width][height] { height: revert; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea {
  font: inherit; color: inherit;
  /* iOS Safari zooms in on any form input whose font-size is < 16px on
     focus. Pin it at 16px minimum to defeat that. The visual cost is
     marginal (forms aren't dense enough for the 1px difference to matter)
     and the UX win is huge — users no longer see the page abruptly zoom
     in when they tap an address line. */
  font-size: max(17px, 1em);
}
/* Default flex-child overflow-min trap: without this, a long word or an
   img with a fixed width inside a flex container forces overflow because
   the default `min-width: auto` ignores the parent's clipping context.
   This is THE most common cause of unexplained horizontal scroll on
   mobile. Reset for all direct flex children. */
:where(.flex-row, [class*="row"], [class*="grid"]) > * { min-width: 0; }

::selection { background: var(--gold-300); color: var(--ink-0); }

/* Scrollbar */
html { scrollbar-color: var(--gold-400) var(--ink-1); }

/* Headings */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
  color: var(--fg);
}
h1 { font-size: clamp(52px, 8vw, 134px); }
h2 { font-size: clamp(39px, 5vw, 78px); }
h3 { font-size: clamp(26px, 2.6vw, 39px); }

/* Eyebrow / micro caps — used liberally */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.eyebrow--beige { color: var(--beige-300); }
.eyebrow--ink { color: var(--ink-2); }

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

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

/* Gold rule — universal divider */
.rule { height: 1px; background: var(--gold-400); opacity: .6; }
.rule-soft { height: 1px; background: var(--rule); }

/* Buttons — gold border, no fills (jeweler's restraint) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  /* WCAG 2.1 + iOS HIG: touch targets must be ≥ 44px tall. The base
     padding already clears this; the rule is a safety net for narrow
     viewports / line-height shrinkage. */
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--gold-300);
  color: var(--gold-100);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  position: relative;
}
.btn:hover {
  background: var(--gold-200);
  color: var(--ink-0);
  border-color: var(--gold-200);
}
.btn--ghost { border-color: var(--rule-strong); color: var(--fg-muted); }
.btn--ghost:hover { border-color: var(--beige-200); color: var(--beige-50); background: transparent; }
.btn--solid { background: var(--gold-200); color: var(--ink-0); border-color: var(--gold-200); }
.btn--solid:hover { background: var(--gold-100); border-color: var(--gold-100); }
.btn--lg { padding: 20px 36px; font-size: 13px; }
/* `.btn--sm` keeps a tighter visual rhythm but stays at the 44px tap
   target so mobile users don't fight to hit it. The padding is the
   visual size; min-height (inherited from .btn) is the touch size. */
.btn--sm { padding: 12px 18px; font-size: 11px; }
.btn--block { width: 100%; justify-content: center; }

/* Beige strip — the "research use only" disclaimer shown on PDP/cart/checkout */
.research-strip {
  background: var(--beige-surface);
  color: var(--beige-surface-text);
  padding: 18px var(--gutter);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}
.research-strip strong { font-weight: 600; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 12px 0;
  color: var(--fg);
  /* max(16px,1em): the 16px floor stops iOS Safari auto-zooming the contact
     form inputs on focus (visually unchanged elsewhere). Matches the global
     input guard near the top of this file. */
  font-size: max(17px, 1em);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-200);
}
.field input::placeholder { color: var(--fg-dim); }

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in var(--dur) var(--ease) both; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Utility */
.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;
}
.flex { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }
.gap-6 { gap: 32px; }

/* Asymmetric grid helpers */
.grid { display: grid; }
.grid-12 { grid-template-columns: repeat(12, 1fr); gap: 24px; }

@media (max-width: 720px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}