/* =============================================================================
 * eden-cura.css - Cura-side overrides for the mirrored /eden/ page.
 *
 * eden.css is copied byte-for-byte from RoxyKovu and sets layout, color,
 * and font-size for the EDEN product page. But it does NOT override
 * font-family, so the headings inherit from Cura's base.css, which uses
 * Caveat (Ghibli hand-lettered display font). On the EDEN page that reads
 * as "the wrong website".
 *
 * This file resets the typography tokens for the EDEN body so EDEN renders
 * in CalSans (the modern sans intended for the EDEN product page), and
 * cancels Cura's Caveat-specific h1/h2 scale-ups since CalSans doesn't
 * need them.
 *
 * Loaded AFTER eden.css in the EDEN template; no other page uses it.
 * ============================================================================= */

body[data-product="eden"] {
  --font-display: "CalSans", "Rubik", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-sans:    "CalSans", "Rubik", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-body:    "Rubik", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

/* EDEN headings: force CalSans, cancel the Caveat 1.25x / 1.15x scale-up
   that base.css applies, restore standard letter-spacing + line-height. */
body[data-product="eden"] .eden-main h1,
body[data-product="eden"] .eden-main h2,
body[data-product="eden"] .eden-main h3,
body[data-product="eden"] .eden-main h4 {
  font-family: "CalSans", "Rubik", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}
body[data-product="eden"] .eden-main h1 { line-height: 1.05; font-weight: 700; }
body[data-product="eden"] .eden-main h2 { line-height: 1.1;  font-weight: 700; }
body[data-product="eden"] .eden-main h3 { line-height: 1.2;  font-weight: 600; }

/* eden.css sets per-element font-size with clamp(...); base.css's
   `h1 { font-size: calc(var(--fs-h1) * 1.25); }` would otherwise win
   when eden.css doesn't specify a size for a given heading. Force the
   computed size from eden.css to take precedence by resetting any
   inherited scale-up on non-hero headings. */
body[data-product="eden"] .eden-main h1:not(.hero h1),
body[data-product="eden"] .eden-main h2:not(.hero h2) {
  font-size: revert-layer;
}

/* Body text inside EDEN should be Rubik (the EDEN body font), not whatever
   inherited from Cura. base.css already sets `body { font-family: var(--font-body); }`
   but we re-state here so any `.eden-main *` inherits cleanly. */
body[data-product="eden"] .eden-main,
body[data-product="eden"] .eden-main p,
body[data-product="eden"] .eden-main li,
body[data-product="eden"] .eden-main span:not([class*="font-"]) {
  font-family: "Rubik", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

/* Cura's body has a custom dark navy-teal gradient; EDEN expects its own
   palette (#0B1120 deep navy). eden.css already sets that on .eden-main but
   the body chrome (header, footer) keeps Cura's gradient, which is the
   intended behavior: Cura chrome wraps EDEN content. */