/* ──────────────────────────────────────────────────────────────────
   ShopDot App — brand layer (umbrella / corporate, cross-vertical)
   Load AFTER foundation/colors_and_type.css; scope is body.brand-app.
   NOT a vertical — use for whole-app / corporate / cross-vertical pieces.

   Direction: "Clean White" (committed) — light page with constant DARK
   near-black-indigo islands (hero, closing CTA, footer). Charcoal text,
   orange accent, indigo eyebrows. Distinct from Pet (warm cream +
   charcoal panels). Health SHARES this direction (2026-06-07 merge):
   brands/health.css mirrors the Clean White block below and differs
   only by logo + forest-green accent — change the direction HERE first,
   then copy the block into health.css.

   Derived from the App website theme (theme-clean.css overlay). The full
   App ramps fall back to the foundation (same charcoal #2c2f32, orange
   #e15439, indigo ramp). What's captured here is the committed surface +
   island + accent direction. Override ONLY deltas from the foundation.
   ────────────────────────────────────────────────────────────────── */

.brand-app {
  /* ─── Logo — stacked Shop/Dot lockup ─── */
  --brand-logo:      url("../logos/app/logo-slate.png");   /* on light surfaces */
  --brand-logo-dark: url("../logos/app/logo-white.png");   /* on dark islands  */

  /* ─── 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: App 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 */

  /* pitch-chrome accent — indigo */
  --sd-accent:     var(--sd-indigo-600);
  --sd-accent-100: var(--sd-indigo-100);
  --sd-accent-600: var(--sd-indigo-700);
}

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