/* =====================================================================
   THEME — light: white canvas + the logo's orange
   ---------------------------------------------------------------------
   This file is the ONLY per-branch stylesheet. styles.css is identical
   on master and light-theme, so feature work cherry-picks between the
   two without ever touching colour. Loaded after styles.css.
   ===================================================================== */
body.site {
  --bg:        #ffffff;
  --bg-soft:   #f7f4f0;
  --bg-dark:   #2b1e12;   /* topbar, footer and advice band stay dark */
  --ink:       #221a12;
  --muted:     #6f6558;
  --line:      #e3dcd2;

  /* Neutral grey replaces the logo orange everywhere it was used — as
     heading and link colour, and as the button fill. */
  --brand:       #717171;
  --text-accent: #717171;
  --primary:     #717171;
  --primary-h:   #5e5e5e;   /* hover: a step darker */
  --accent:      #717171;
  --accent-soft: rgba(113, 113, 113, .16);
  --star:        #717171;
  /* The same grey reads at 3.3:1 on the dark bands — fine for a heading,
     short of AA for the 15px footer labels. They take a light grey. */
  --text-accent-dark: #cbcbcb;

  /* Hooks the shared stylesheet reads for theme-varying surfaces. */
  /* The backdrop is only softened, not hidden — sections supply their own
     surface instead, so text never sits straight on the photo. */
  --scrim:       rgba(255, 255, 255, .32);
  /* Solid. The real photographs are dusk shots, far darker than the
     drawn scenes they replaced, and even at .975 they pulled the orange
     on section panels down to 4.46:1 — just under AA. The backdrop shows
     through the hero and showcase bands instead. */
  --panel:       #ffffff;
  --panel-alt:   #f8f5f1;
  /* Frosted surface for text that floats over the photography. */
  --frost:       rgba(255, 255, 255, .93);
  --header-bg:   #ffffff;   /* solid: the sticky bar has to stay legible */
  --menu-bg:     var(--bg);
  --menu-hover:  var(--bg-soft);
  --menu-shadow: 0 12px 32px rgba(40, 28, 16, .16);
  --field-bg:    var(--bg);
}

/* The page itself is see-through so the fixed backdrop reads; the scrim
   in .bgstage supplies the base tone instead of body's own background. */
body.site { background: transparent; }
/* Every section carries its own near-opaque surface so copy stays legible;
   showcase sections drop it and let the material read at full strength,
   because their content already sits on cards or a dark block. */
body.site .section        { background: var(--panel); }
body.site .section--soft  { background: var(--panel-alt); }
body.site .hero,
body.site .section--showcase { background: transparent; }

/* Only the home page is laid out over the backdrop. Everywhere else the
   content column gets a solid surface: those pages are dense text with no
   cards to sit on, and without this the product page rendered its
   breadcrumbs, price and assurances straight onto the photograph. */
body.site:not(.is-home) main { background: var(--panel); }

/* Home page only: [data-bg] marks the sections the backdrop was written
   for, so the photography runs the length of the page. */
body.site .section[data-bg],
body.site .section[data-bg].section--soft { background: transparent; }

/* Bare text in those sections needs its own surface. The heading block
   and the USP items are the only things there not already on a card. */
body.site .section[data-bg] .section__head,
body.site .section[data-bg] .usp__item {
  background: var(--frost);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius);
}
body.site .section[data-bg] .section__head {
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
/* Solid, not frosted. The section head only carries large text, which
   needs 3:1 and clears it through the frost; these carry 16px headings
   needing 4.5:1, and the frost over a dusk photo left them at 4.2. */
body.site .section[data-bg] .usp__item {
  padding: 20px; align-items: center;
  background: var(--panel);
}
body.site .section[data-bg] .usp { gap: 18px; }

body.site .header      { background: var(--header-bg); }
body.site .topbar      { background: var(--bg-dark); }
body.site .brand__mark { background: var(--primary); }
body.site .brand       { color: var(--text-accent); }
/* The wordmark repeats in the footer, on the dark block. At Thin it no longer
   counts as large text, so the body grey's 3.32 there is now a failure. */
body.site .footer .brand { color: var(--text-accent-dark); }

/* Dropdown items style themselves (see .catalog__menu), so keep the
   generic nav-link rules off them. */
body.site .nav a:not(.catalog__menu a) { color: var(--text-accent); font-weight: var(--w-text); }
body.site .nav a:not(.catalog__menu a):hover,
body.site .nav a:not(.catalog__menu a)[aria-current="page"] { background: var(--bg-soft); color: var(--text-accent); }

/* Only the colour behind the material shot — the image itself is set
   inline per tile, so no gradient here or it would fight it. */
body.site .ph { background-color: #e6ded4; }

/* --- Overlay tiles ---------------------------------------------------
   The hero and category captions are white text sized for a dark photo.
   Over a light placeholder they rendered white-on-white — the eyebrow,
   body copy and "Explore" links measured 1.0:1. They are white cards
   here instead: the caption sits on solid white that fades up, so a real
   photo still shows through the top of the tile once one is set. */
/* A caption card pinned to the bottom of the tile, with the material
   filling everything above it. A fading gradient was tried first, but the
   eyebrow sits highest and ended up grey-on-wood. Solid white means every
   line of caption text has a guaranteed backdrop. */
body.site .hero__panel {
  background: var(--bg);
  display: flex; flex-direction: column; min-height: 860px;
}
body.site .hero__panel > .hero__content {
  margin-top: auto; min-height: 0;
  background: #fff; color: var(--ink);
}
body.site .hero__panel > .hero__content .eyebrow { color: var(--muted) !important; }
body.site .hero__panel > .hero__content p:not(.eyebrow) { color: var(--ink); }

body.site .cat-card { background: var(--bg); }
body.site .cat-card__body {
  inset: auto 0 0 0;                 /* bottom strip, not the whole tile */
  background: #fff; color: var(--ink);
}
body.site .cat-card__body span { color: var(--muted); opacity: 1; }

/* Stretch the caption to the full tile, otherwise the placeholder shows
   as a strip below it now that the content is in normal flow. */
body.site .hero__mini { background: var(--bg); display: flex; flex-direction: column; }
body.site .hero__mini .hero__content {
  margin-top: auto; min-height: 0;
  background: #fff; color: var(--ink);
}
body.site .hero__mini .link-more { color: var(--text-accent) !important; }

/* --- Surfaces -------------------------------------------------------- */
body.site .card       { background: var(--bg); }
body.site .badge--new { background: var(--bg-dark); }
body.site .wish       { background: rgba(255, 255, 255, .88); }

body.site .quote         { background: var(--bg-soft); }
/* The initial is 14px, so it needs 4.5:1 whatever its weight; the body grey
   on the hairline tone gives 3.59. */
body.site .quote__avatar { background: var(--line); color: var(--ink); }

body.site .input,
body.site .select,
body.site .chip,
body.site .qty button { background: var(--bg-soft); border-color: var(--line); }
body.site .input:focus { background: var(--bg); }
body.site .qty button:hover { background: var(--line); }
body.site .header__search input:focus { background: var(--field-bg); }

body.site .btn--ghost { background: transparent; }

body.site .check,
body.site .assurances li,
body.site .acct-nav nav a { color: var(--muted); }
body.site .acct-nav nav a.is-active { background: var(--primary); }
body.site .check input { accent-color: var(--primary); }
body.site .pdp__desc { color: var(--ink); }

body.site .footer .brand__mark { background: var(--primary); color: #fff; }

/* --- Headings --------------------------------------------------------
   h1/h2 render at 24px+, which is AA "large text" (3:1), so they carry
   the logo's own orange. h3/h4 are small enough to need 4.5:1 and take
   the deeper shade. */
body.site h1, body.site h2 { color: var(--text-accent); }
body.site h3, body.site h4 { color: var(--text-accent); }

/* On white: the lead hero panel and the tiles. */
body.site .hero__panel > .hero__content h1,
body.site .hero__mini .hero__content h2 { color: var(--text-accent); font-weight: var(--w-display); }
/* The tile heading is 18px — small enough to need the body weight. */
body.site .cat-card__body h3 { color: var(--text-accent); font-weight: var(--w-text); }

/* Still on a dark surface, so these take the light grey — the body grey
   lands at 3.3:1 against the dark footer. */
body.site .band h2,
body.site .footer__grid h4 { color: var(--text-accent-dark); }