/*
=====================================================================
 Belldiva Redesign — Design System & Components
 "Rooted in care. Refined in you."

 Ported from the approved design concept (artifact 3a15ecee).

 SCOPING RULES (this is what keeps the CSS-only failure from repeating):
 - All page-component styles are scoped under `.bd` (our templates wrap
   their content in <main class="bd bd-page">). They never leak into
   Salient/WooCommerce pages.
 - Design tokens are declared on `.bd` and inherit to all descendants.
 - Site-wide chrome (the top nav, footer) uses its own `.bd-topnav` /
   `.bd-footer` prefixes and may be styled globally.
 - Loaded AFTER style.css and redesign.css so these rules win.
=====================================================================
*/

/* ---------------------------------------------------------------------
   Design tokens (scoped to .bd + chrome so they don't fight Salient vars)

   EVERY chrome component must be listed here. A component left out does
   not inherit the tokens, so `background: var(--deep)` resolves to
   nothing at computed-value time and the element renders unstyled: the
   announce bar came out white-on-white exactly this way. If you add a
   new top-level chrome block, add its class to this selector list.
   --------------------------------------------------------------------- */
.bd,
.bd-announce,
.bd-topnav,
.bd-footer,
.bd-newsletter-wrap {
  --ground: #F5EEE2;
  --ground-raised: #FFFFFF;
  --ink: #1C1A16;
  --ink-soft: #665F53;
  --line: #E4DACA;
  --line-soft: #EEE5D6;
  --accent: #C5405A;
  --accent-tint: #F7EBEC;
  --deep: #0F231B;
  --deep-tint: #E6EBE5;
  --focus: #0F231B;
  --shadow: 0 1px 2px rgba(20,17,10,0.05), 0 8px 24px rgba(20,17,10,0.08);

  --gold: #B8935C;
  /* Darkened from #8C6B3E, which measured 4.25:1 on the cream ground and so
     missed WCAG AA (4.5:1) for normal-size text. This carries every small
     label on the site (eyebrows, prices, "View on Amazon"), so it has to
     pass. #866339 measures 4.72:1 on cream and 5.44:1 on white.
     --gold stays as it is: it fails on cream (2.47:1) but is only ever used
     on the dark green ground, where it measures 5.77:1, and for decorative
     rules that carry no text. */
  --gold-deep: #866339;
  --gold-tint: #F0E4D0;
  /* --gold-deep is 4.33:1 on --gold-tint, short of AA. For text on the tint
     (Anita's Picks hero and routine subtitles): 5.01:1. */
  --gold-deep-on-tint: #7A5A33;

  /* photography-style placeholders — dark green/gold, standing in for real shots */
  --ph-1: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.16), transparent 50%), linear-gradient(155deg, var(--deep) 0%, #1B362A 55%, var(--gold-deep) 100%);
  --ph-2: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.14), transparent 50%), linear-gradient(160deg, var(--gold-deep) 0%, #4A3B22 55%, var(--deep) 100%);
  --ph-3: radial-gradient(circle at 25% 75%, rgba(255,255,255,0.14), transparent 50%), linear-gradient(145deg, var(--deep) 0%, var(--gold) 100%);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: clamp(2.5rem, 4.4vw, 3.75rem);

  /* In rem, so spacing grows with the type on large monitors (see the root
     size in _base.css). At the default 16px root these are exactly 4px to
     80px, so nothing moves below 1600px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout width. The content column is 1240px up to a 1600px window, then
     takes 77.5% of the window up to 1760px (reached at about 2270px), so a
     big monitor gets more room, not a magnified laptop page. The side gutter
     is 20px on phones, 28px on a laptop and up to 56px on a large monitor.
     Used by .wrap and by every chrome bar so their edges line up. */
  --wrap-max: clamp(1240px, 77.5vw, 1760px);
  /* 20px on phones, rising to the laptop's 28px by about 1080px, exactly
     28px from there to 1600px (the reference layout does not move), then
     growing to 56px at 2560px. */
  --gutter: min(56px, max(clamp(20px, 2.6vw, 28px), calc(28px + (100vw - 1600px) * 0.0292)));
}