/* ==========================================================================
   Phresh Care Co - main.css
   Tokens + shared base + component hover/focus states.
   Visual source of truth: design_handoff_phresh_site (see docs/DESIGN.md).
   Structural layout lives inline in each page (verbatim from the handoff);
   this file carries the design tokens, base reset, keyframes and the
   :hover / :focus states that inline styles cannot express.
   No rounded corners, no gradients, no soft shadows, no em-dashes.
   ========================================================================== */

:root {
  --bg: #26282b;        /* page background (graphite) */
  --stage: #141618;     /* stage / dark panels */
  --blk: #0a0a0a;       /* true black: light-section text/borders, price stamp */
  --wht: #ffffff;       /* white text, borders, buttons */
  --acid: #d4ff00;      /* acid volt yellow: accents, hovers, prices, verified */
  --acid-dark: #8aa600; /* dark volt, for any deepened accent needs */
  --grey: #8a8a8a;      /* secondary text */
  --body: #c8c8c8;      /* body copy grey */
  --row: #2f3236;       /* hover row background */
  --hero-img-brightness: 0.85; /* master dim dial for the baked hero composite */
}

/* ----- base / reset (matches the handoff head styles) ----- */
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--wht);
  font-family: 'Inter Tight', sans-serif;
  overflow-x: clip;
}
::selection { background: var(--acid); color: var(--blk); }
a { color: inherit; }
a:hover { color: inherit; }
img { max-width: 100%; }

/* hollow display type: transparent fill + 2px white stroke */
[data-hollow="1"] { color: transparent; -webkit-text-stroke: 2px var(--wht); }

/* homepage hero alley: lift the inherently dark render so it reads clearly
   behind the wordmark. Tune via --hero-img-brightness above. Filter only -
   layout, transform (parallax/scale) and motion are untouched. */
/* homepage hero composite (marks baked into the photo by scripts/build-hero.py).
   The brightness filter is the master dim dial for the baked image. */
.hero-img { filter: brightness(var(--hero-img-brightness)); }

/* ----- keyframes ----- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ==========================================================================
   Component hover / focus states
   (each class mirrors a `style-hover` / `style-focus` from the handoff)
   ========================================================================== */

/* nav + generic underline links */
.fx-underline:hover { text-decoration: underline; text-underline-offset: 4px; }

/* LOOK product card (white section) */
.fx-look:hover { background: #f2f2f2; }
/* ADD TO CART pill inside a LOOK card */
.fx-look:hover .fx-addcart { background: var(--acid); border-bottom-color: var(--acid); }

/* kit card frame */
.fx-kcard-hover:hover { border-color: var(--acid); }

/* solid white button / CTA: hover fills with the accent behind black text.
   The base background/border are set inline on each button, so the hover must
   use !important to win over inline specificity (this is the fix for the
   previously-inert white-button hover). Volt fill + black text stays legible. */
.fx-btnw:hover { background: var(--acid) !important; border-color: var(--acid) !important; }

/* ledger / archive / proof rows and shop tabs */
.fx-row:hover { background: var(--row); }

/* accent text on hover */
.fx-mint:hover { color: var(--acid); }
/* accent text + accent underline on hover */
.fx-mint-b:hover { color: var(--acid); border-bottom-color: var(--acid); }

/* email capture input focus */
.fx-focus:focus { outline: none; border-color: var(--acid); }

/* ==========================================================================
   Small-screen guards: prevent horizontal scroll, keep nav from crowding.
   Layout grids in the pages already stack via auto-fit.
   ========================================================================== */
@media (max-width: 560px) {
  nav .nav-links { gap: 16px !important; font-size: 0.6rem !important; }
}

/* ----- reduced motion: kill all animation, static + fully visible ----- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}