/* =============================================================================
   Aclarity.ai — Brand_2 design tokens (single source of truth)
   Locked in design.md Sections 4 (color) and 5 (typography).
   Supersedes the earlier Obsidian/Gold/Champagne palette + two-font set.
   Import this file everywhere; never hard-code a hex or font-family elsewhere.
   ============================================================================= */

/* Three typefaces (design.md §5, updated with the Poiret One wordmark lock).
   Source Serif Pro dropped from the brand type system - two fonts now:
   Poiret One (display/wordmark) and Jost (everything else). Cormorant
   Garamond stays imported here only because --font-display still points to
   it pending its own retirement; it is not part of today's change. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Jost:wght@400;500;700&family=Poiret+One&display=swap");

:root {
  /* ---- Color palette (design.md §4). Hex + role, "where it lives." ---- */
  --color-onyx:   #111313; /* body & UI text */
  --color-gilded: #C9A85F; /* primary accent — a scalpel, not a paintbrush */
  --color-forest: #122C21; /* primary brand — hero/section backgrounds, logo */
  --color-sand:   #D8C08C; /* supporting accent — chips, secondary buttons */
  --color-bronze: #645022; /* deep accent — dividers, metadata, captions */
  --color-linen:  #F5EFE1; /* type & focal moments on dark; light surfaces */

  /* ---- Semantic roles (use these in components, not the raw names) ---- */
  --brand-surface:        var(--color-forest); /* dark brand surfaces */
  --brand-surface-light:  var(--color-linen);  /* light reading surfaces */
  --text-body:            var(--color-onyx);   /* on light */
  --text-on-dark:         var(--color-linen);  /* on Forest/dark */
  /* Sand, not Bronze - Bronze on Onyx measured 2.41:1 (fails WCAG AA);
     Sand measures 10.52:1 and preserves the same "quieter than primary
     text" hierarchy Bronze was reaching for. Bronze is retired from text
     use entirely as of 2026-07-04 - decorative use only (--rule below). */
  --text-muted:           var(--color-sand);   /* metadata, timestamps, captions */
  --accent:               var(--color-gilded); /* CTAs, active/focus states */
  --accent-secondary:     var(--color-sand);   /* tags, secondary outlines */
  --rule:                 var(--color-bronze); /* dividers & key lines - decorative only, not text */

  /* ---- Typefaces ---- */
  --font-display:  "Cormorant Garamond", Georgia, serif; /* hero titles, quotes */
  --font-wordmark: "Poiret One", serif;                  /* the "aclarity.ai" wordmark ONLY — locked over Cormorant per the brand asset clean sweep, July 2026 */
  --font-body:     "Jost", system-ui, sans-serif;        /* long-form body, science copy - was Source Serif Pro, dropped from the brand type system (2-font system: Poiret One + Jost) */
  --font-ui:       "Jost", system-ui, sans-serif;        /* nav, buttons, labels, charts */

  /* ---- Mobile-tuned type scale (design.md §5, in rem @ 16px base) ---- */
  --fs-logo:     2.5rem;   /* Cormorant logo lockup 32–40pt */
  --fs-hero:     1.75rem;  /* Cormorant hero title 24–28pt */
  --fs-tagline:  1.125rem; /* Cormorant tagline italic 16–18pt */
  --fs-h1:       1.5rem;   /* Jost H1 24pt */
  --fs-h2:       1.375rem; /* H2 22pt */
  --fs-body:     1.0625rem;/* body copy 17pt */
  --fs-ui:       1rem;     /* Jost body/button 16pt */
  --fs-caption:  0.8125rem;/* caption 13pt */
  --fs-micro:    0.6875rem;/* Jost micro 11pt */

  /* ---- Safe margin (design.md §5) ----
     120px is the desktop figure; design.md itself wasn't accessible to me
     when writing this (it lives in the Claude Project files, not this repo,
     Drive, or Notion), so the fluid curve below — 120px at ~1440px+ down to
     ~20px at narrow mobile — is a reasoned interpolation, not a value copied
     from the doc. Flag/correct if it doesn't match the source. */
  --safe-margin: clamp(1.25rem, 8vw, 120px);
}

/* Global focus state - suppresses the browser's default blue outline on
   buttons (and other interactive elements) site-wide, replacing it with a
   brand-appropriate Gilded ring. brand.css is imported on every page, so
   this is the one place to fix it instead of per-page overrides. Only
   :focus-visible (keyboard/programmatic focus), not :focus, so mouse
   clicks don't gain a ring that wasn't there before. */
button:focus,
input:focus,
a:focus,
[tabindex]:focus {
  outline: none;
}
button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gilded);
  outline-offset: 2px;
}

/* ---- Base element defaults expressing the roles above ---- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: var(--brand-surface-light);
  line-height: 1.6;
}

/* Linen, not Forest - Onyx is the locked default background for product
   surfaces (design.md July 2 PM addendum), and every h1/h2/h3 on the site
   currently sits on Onyx (audited 2026-07-04: zero exceptions). Linen also
   works on a Forest ground per design.md's approved lockup, so this default
   holds if a Forest-surface heading is ever added; only a Sand ground would
   need an override back to Onyx text. */
/* h1 gets Poiret, not Cormorant Garamond: design.md Section 5 lists "hero
   titles" under Poiret's own use cases alongside the wordmark, not just
   long-form headings. h2/h3 (editorial sub-heads, unused site-wide as of
   2026-07-04) get --font-body (Jost, as of the Source Serif retirement) -
   Poiret is reserved for the wordmark and hero titles only, not general
   sub-headings; Cormorant Garamond is retired site-wide. */
h1 { font-family: var(--font-wordmark); color: var(--color-linen); }
h2, h3 { font-family: var(--font-body); color: var(--color-linen); }

.font-display  { font-family: var(--font-display); }
.font-wordmark { font-family: var(--font-wordmark); }
.font-body     { font-family: var(--font-body); }
.font-ui       { font-family: var(--font-ui); }

/* Wide page container - browse-only variant of app.css's .page. Every other
   product page (/ask/, /conflict-check/, /account/, etc.) is a single
   narrow reading/answer column and stays on .page's 640px cap; the
   ingredient browse page is the first grid-of-cards layout on the site and
   needs real room for a multi-column grid, so it gets its own class rather
   than widening .page under every other page. Same padding/margin/box-sizing
   pattern as .page (app.css) - only the max-width differs, and deliberately
   NOT via .page's calc(100vw - 2 * var(--safe-margin)) - --safe-margin's
   8vw term is tuned to keep a 640px reading column comfortably clear of the
   edge, but applied to a 1100px grid it over-shrinks the container in the
   tablet range (measured 768px viewport -> ~645px container, collapsing the
   3-column grid to 1). width:100% plus a flat max-width already caps this
   safely on its own with no separate vw subtraction needed. */
.page--wide {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--site-nav-height, 112px) + 2rem) 1.5rem 2rem;
  box-sizing: border-box;
}

/* nav.js measures the real nav height and corrects --site-nav-height on
   load, but until then this 112px desktop fallback is wrong on mobile -
   the nav's link row is hidden below 640px (nav.css), so the real height
   is ~77px. That mismatch shifts all page content up by ~35px right after
   load, which is enough to make a tap on a filter pill near the top of a
   fast-loading mobile page land on the wrong element. Matching nav.css's
   own breakpoint here removes the shift instead of just narrowing it. */
@media (max-width: 640px) {
  .page--wide {
    padding-top: calc(var(--site-nav-height, 80px) + 2rem);
  }
}

/* =============================================================================
   Locked card pattern (G4S1-C, approved in a Claude Design session with
   Berkley). Every other component on the site lives in its own page-scoped
   stylesheet (app.css, conflict-check.css, ingredient.css) - this one lives
   here instead because it's the first UI pattern meant to be reused across
   more than one page (any future gated-content surface, not just the
   ingredient detail page), same reasoning brand.css's own header docstring
   gives for tokens: "import this file everywhere." No new colors or type
   styles - Forest/Onyx/Gilded/Sand/Linen/Bronze only, --fs-micro for labels.
   ============================================================================= */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-forest);
  border: 1px solid var(--color-bronze);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  /* A locked card's only in-flow content is the tier label (name/price/CTA
     never render for it - see ingredient.js), which alone is far shorter
     than the overlay's own content (lock text + button + padding) needs.
     Without a floor here the overlay's absolutely-positioned inset:0 box
     matches that too-short card height and its content spills out above/
     below the visible border - a real rendering bug caught in browser QA,
     not a one-off. Essential cards (name+price+CTA) comfortably clear this
     height on their own, so the floor only actually engages the locked
     state. */
  min-height: 190px;
  box-sizing: border-box;
  color: var(--color-linen);
}

.product-card__tier-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: 8px;
}

.product-card__name {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  color: var(--color-linen);
  margin: 0 0 8px;
}

.product-card__price {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--color-gilded);
  margin: 0 0 14px;
}

.product-card__cta {
  display: block;
  width: 100%;
  /* Cards next to each other in a row have different name/price lengths
     (locked/unlocked, price wrapping, etc.) - pushing the CTA to the card's
     bottom edge instead of letting it sit wherever content ends keeps every
     button in a row aligned along the same baseline. */
  margin-top: auto;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: var(--color-gilded);
  color: var(--color-onyx);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.product-card__cta:hover,
.product-card__cta:focus-visible {
  background: var(--color-linen);
}

/* Locked state - calm, not punitive, but a full cover, not a partial one.
   G4S1-C fix pass: the overlay used to sit over just the bottom of the
   card (left/right/bottom insets only), leaving the tier label AND
   whatever sat above it (product name, when the server still sent one)
   visible above the overlay's top edge - a real paywall bypass, not just
   a visual nit. inset:0 covers the entire card content area edge to edge;
   the tier label itself now renders on TOP of the overlay (see
   .product-card--locked .product-card__tier-label below) since that's the
   one piece of information the locked state is meant to reveal. */
.product-card--locked .product-card__lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-forest);
  border-radius: 8px;
  box-sizing: border-box;
}
.product-card--locked .product-card__tier-label {
  position: relative;
  z-index: 1;
}
.product-card--locked .product-card__lock-text {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}
.product-card--locked .product-card__unlock-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-gilded);
  border-radius: 6px;
  background: transparent;
  color: var(--color-gilded);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.product-card--locked .product-card__unlock-cta:hover,
.product-card--locked .product-card__unlock-cta:focus-visible {
  background: var(--color-gilded);
  color: var(--color-onyx);
}

.product-suggestions__disclosure {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 0.5rem 0 1.25rem;
}