/* ──────────────────────────────────────────────────────────────────
   ShopDot Health — brand layer (vertical)
   Load AFTER foundation/colors_and_type.css; scope is body.brand-health.

   MERGED DIRECTION (2026-06-07): Health and App had drifted to near-
   identical identities (both indigo-accent + orange-CTA), so Health now
   SHARES App's committed "Clean White" direction — white page, constant
   dark near-black-indigo islands (hero, closing CTA, footer), charcoal
   text, orange CTA, indigo eyebrows.

   What stays Health's own:
   - the Health logo lockup (SVG, scales clean for print)
   - FOREST GREEN as the secondary accent (chips, icon tiles, blobs) —
     official Deep Forest Green ramp from "Branded Colors - HEX Codes"
     at its softer 500 step, so clinical chips don't read as success
     states. Orange stays the CTA; indigo stays the eyebrow.
   (The old sage/teal data-palette opt-ins are retired — sage was
   off-palette, teal collided with --sd-info.)

   The CLEAN WHITE block below MIRRORS brands/app.css. The sync script
   copies one brand file per project, so this file must stay
   self-contained. Change the direction in brands/app.css FIRST, then
   copy the block here.
   ────────────────────────────────────────────────────────────────── */

.brand-health {
  /* ─── Logo ─── (SVG, scales clean for print) */
  --brand-logo:      url("../logos/health/health - black orange.svg");  /* light pages */
  --brand-logo-dark: url("../logos/health/health - white orange.svg");  /* dark islands */

  /* ═══ CLEAN WHITE — mirrors brands/app.css; keep in sync ═══ */

  /* ─── Clean White light surfaces ─── */
  --sd-bg:            #ffffff;                  /* page background */
  --sd-bg-raised:     #f4f6f8;                  /* cool light-grey raised section */
  --sd-bg-card:       #ffffff;                  /* card surface */
  --sd-bg-card-2:     #fafbfc;                  /* faint raised card */
  --sd-hairline:      rgba(44, 47, 50, 0.11);
  --sd-hairline-soft: rgba(44, 47, 50, 0.055);

  /* ─── Dark islands — deep near-black indigo (hero / CTA / footer) ─── */
  --sd-island:           #16122a;
  --sd-island-panel:     #1d2142;
  --sd-island-panel-2:   #242a52;
  --sd-fg-on-island:        #eef0f8;
  --sd-fg-muted-on-island:  #aab0ce;
  --sd-fg-subtle-on-island: #8489aa;
  --sd-hairline-on-island:  rgba(160, 166, 196, 0.16);

  /* ─── Orange accent — remapped for contrast per surface ─── */
  --sd-orange-on-light:  #c0442a;   /* readable orange text on white */
  --sd-orange-on-island: #fdb2a4;   /* light orange on dark islands  */
  /* (fills / CTAs still use the full --sd-primary #e15439) */

  /* ─── Card depth — soft long lifted shadow (warm-charcoal) ─── */
  --sd-shadow-card: 0 1px 2px rgba(44,47,50,0.04),
                    0 22px 38px -24px rgba(44,47,50,0.16);

  /* ─── Deep surface — for pitch/B2B deck bg-deep slides ─── */
  --sd-deep: var(--sd-island);  /* deep slides: same dark island */

  /* Clean White: remap the foundation's warm surfaces */
  --sd-bg-cream: var(--sd-bg-raised);   /* warm cream → cool light grey */
  --sd-bg-blush: var(--sd-bg-card-2);   /* blush → faint raised card */

  /* ═══ HEALTH DELTA — forest accent (the vertical's signature) ═══
     Official Deep Forest Green ramp: 500 #498058 · 100 #dfece0 · 700 #2b5137.
     Carries chips, icon tiles, decorative blobs — never CTAs, eyebrows,
     or the logo. (App binds these to indigo; Health goes forest.) */
  --sd-accent:     #498058;   /* forest-500 — soft, not the success-600 */
  --sd-accent-100: #dfece0;   /* forest-100 tint — chip backgrounds */
  --sd-accent-600: #2b5137;   /* forest-700 — chip text, AA on the tint */
}

/* ─── Semantic: eyebrows read indigo on light (orange is CTA/emphasis) ─── */
.brand-health .sd-eyebrow { color: var(--sd-indigo-600); }
/* Inside dark islands, eyebrows lighten to indigo-300. */
.brand-health .on-island .sd-eyebrow { color: var(--sd-indigo-300); }