/* Eden and Dane: sitewide readability and texture.
 *
 * Loaded last on every page, after the page's own inline styles.
 *
 * 1. Light-mode tokens. Sage (#8a9a7b) and clay (#b8755a) were used for small
 *    text on cream and paper backgrounds at about 2.6 to 2.9:1 contrast,
 *    below the 4.5:1 readable minimum. Darker values bring them to roughly
 *    5:1. A plain :root rule only replaces the light values: each page's dark
 *    palette sits under :root:not([data-theme="light"]), which outranks it.
 *
 * 2. Always-dark sections. Several sections keep a dark background in both
 *    color schemes (footer, menu, callout bands, spec cards, dark feature
 *    blocks). Text inside them was written with the page tokens, which flip
 *    with the scheme, so it went dark-on-dark in one mode or the other.
 *    Inside those sections the tokens are pinned to their on-dark values.
 *
 * 3. One-off fixes, each noted below.
 *
 * 4. A faint paper grain on the page background.
 */

:root {
  --sage: #5c6b50;
  --clay: #964f33;
  --clay-warm: #9a5a40;
}

.footer, .menu-overlay, .callout-band, .pawpaw-feature, .plant-spec,
.nursery-intro:not([style*="background"]), .digital-products, .cairns, .stats,
.tier--featured, .v2-ticker, .v2-svc--dark, .v2-process, .v2-notes, .v2-founder,
.v3-hero, .v3-cta, .v3-tier--dark, .rs-cta, .cta-band:not([data-tone="light"]),
.dos2-hero, .dos2-sec:not(.dos2-sec--paper):not(.dos2-sec--bone), .dos2-roi__card,
.dos2-zone, .dos2-stats, .dos2-priv {
  --moss: #a8c29c;
  --forest: #b7c7ae;
  --sage: #9fb092;
  --clay: #d99274;
  --clay-warm: #e2a687;
  --cream: #ebe3d3;
  --bone: #f4efe6;
  --ink: #f2ede2;
  color: #ebe3d3;
}
/* Primary buttons inside those sections keep a deep clay fill, since the
   pinned --clay above is the light accent meant for text. */
:is(.callout-band, .pawpaw-feature, .plant-spec, .nursery-intro:not([style*="background"]),
    .digital-products, .cairns, .tier--featured, .v3-cta, .v3-tier--dark, .rs-cta,
    .cta-band:not([data-tone="light"]), .stats, [class*="v2-"]) .btn--primary {
  background: #9c5a3b !important; border-color: #9c5a3b !important; color: #f4efe6 !important;
}

/* Backgrounds that used a flipping token for a band meant to stay dark. */
.tier--featured { background: var(--moss-fixed, #2b3a2a) !important; }
.pawpaw-feature[style*="var(--moss)"] { background: var(--moss-fixed, #2b3a2a) !important; }
.rs-cta { background: var(--moss-fixed, #2b3a2a) !important; }

/* "What's included" and "Planting information" cards. The rows had no color
   of their own and inherited the page's dark body text, and seven digital
   product pages had no styles for the card at all. */
.plant-spec { padding: clamp(60px,7vw,90px) 0; background: var(--ink-fixed, #1a1f18); }
.plant-spec__card { max-width: 720px; margin: 0 auto; background: rgba(235,227,211,0.04); border: 1px solid rgba(235,227,211,0.32); border-radius: 16px; padding: clamp(28px,4vw,48px); box-shadow: 0 1px 0 rgba(235,227,211,0.06) inset, 0 20px 50px rgba(0,0,0,0.25); }
.plant-spec__header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.plant-spec__header h2, .plant-spec h2 { font-family: var(--display); font-weight: 300; font-size: clamp(26px,3vw,34px); line-height: 1.15; color: #ebe3d3; margin: 0; }
.plant-spec__row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(235,227,211,0.1); align-items: start; }
.plant-spec__row:first-of-type { border-top: none; }
.plant-spec__label { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.plant-spec__value { font-size: 15px; line-height: 1.6; }
@media (max-width: 640px) { .plant-spec__row { grid-template-columns: 1fr; gap: 6px; } }
.plant-spec__label { color: rgba(235, 227, 211, .72) !important; }
.plant-spec__value { color: #ebe3d3 !important; }
.plant-spec__label .icon, .plant-spec__label svg { color: #e2a687; }

/* Featured shop card on a clay background. */
.product-card--featured { background: #8f4f36 !important; }
.product-card--featured .buy-now-btn { color: #f4efe6 !important; background: #2b3a2a !important; border-color: #2b3a2a !important; }
.cb-submit__btn { background: #8f4f36 !important; color: #f4efe6 !important; }

/* The cart drawer waits just off the right edge; its shadow leaked into view
   as a grey band down the side of every page. Shadow only while open. */
.cart-drawer:not(.is-open) { box-shadow: none !important; }

/* Shop and nursery photo cards show "Details" and "Add to cart" on hover.
   On touch screens there is no hover, but the invisible buttons still took
   taps, so tapping a photo could add it to the cart instead of opening the
   plant's page. Touch screens get the plain photo, which links to the page. */
@media (hover: none) {
  .plant-card__hover, .nursery-card__hover { display: none !important; }
}

/* Star ratings on cream. */
.quote-card__stars { color: #a86f00 !important; }

/* Dossiers: phase lists on the bone band used text colors meant for a dark
   band, and the highlighted value card used the flipping clay token. */
.dos2-sec--bone .dos2-phase__t { color: var(--moss) !important; }
.dos2-sec--bone .dos2-phase__b { color: var(--forest) !important; opacity: 1 !important; }
.dos2-roi__card.hero { background: #8f4f36 !important; color: #f4efe6 !important; }

/* Tags and badges on token-colored fills that turn pale in dark mode. */
.tag--tree { background: #2b3a2a !important; color: #ebe3d3 !important; }
.tag--shrub { background: #3d5039 !important; color: #ebe3d3 !important; }
.v2-svc__badge { background: #8f4f36 !important; color: #f4efe6 !important; }

/* Paper grain. A tiled SVG noise laid over the whole page at very low
   strength, so open fields of cream or green read as paper and felt rather
   than a flat fill. Almost every section paints its own solid background,
   so a texture behind the content would never show; this sits on top
   instead, ignores the pointer, and is faint enough that text contrast is
   unchanged in practice. Multiply darkens a touch in light mode; screen
   lifts a touch in dark mode. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    mix-blend-mode: screen; opacity: .4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] body::before {
  mix-blend-mode: screen; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }
@media print { body::before { display: none; } }