/* ══════════════════════════════════════════════════════════════════════
   CHL BUSINESS PAGE — starter-palette.css  (BP:PALETTE v1)

   The governed SECTION-TONE layer. Palettes arrive as --sbp-* tokens on
   the page root (config/bp_palettes.php → chl_bp_palette_helper.php);
   this sheet declares NO palette values of its own — only relationships:

     .sbp-tone--canvas   open page background (no chrome added)
     .sbp-tone--soft     companion wash panel
     .sbp-tone--deep     surface_contrast statement band (ink remapped)
     .sbp-tone--artwork  canvas + gradient-law field behind media
     .sbp-tone--action   soft surface with an action-role left cue

   Tokens with fallbacks so Walnut & Linen (keel-only, no inline overrides)
   resolves identically to today: --sbp-soft → acc-soft, --sbp-deep →
   warm dark, --sbp-splash → signature orange.

   Scope law: everything lives under .sbp-page. Nothing here restyles
   the surrounding chrome or the Website Studio worlds.
   ══════════════════════════════════════════════════════════════════════ */

.sbp-page {
	--sbp-soft-x: var(--sbp-soft, var(--sbp-acc-soft));
	--sbp-deep-x: var(--sbp-deep, #2b2119);
	--sbp-deep-ink-x: var(--sbp-deep-ink, #f5efe7);
	--sbp-splash-x: var(--sbp-splash, var(--sbp-org-display));
	--sbp-splash-ink-x: var(--sbp-splash-ink, var(--sbp-org-ink));
	--sbp-action-ink-x: var(--sbp-action-ink, #ffffff);
}

/* ── SOFT — the companion wash. A rounded panel, gently inset, so the
      page keeps rhythm: canvas → wash → canvas. ─────────────────────── */
.sbp-page .sbp-tone--soft {
	background: var(--sbp-soft-x);
	border-radius: var(--sbp-r-lg);
	padding: clamp(18px, 3vw, 30px) clamp(16px, 2.6vw, 28px);
	margin: clamp(10px, 1.6vw, 16px) 0;
}

/* ── ARTWORK — media sections float on the palette's light-study field,
      the same law as missing-media fallbacks, so imagery always sits on
      palette-true ground. ───────────────────────────────────────────── */
.sbp-page .sbp-tone--artwork {
	background:
		radial-gradient(120% 130% at 12% 0%, var(--sbp-field-b) 0%, transparent 60%),
		radial-gradient(120% 140% at 92% 100%, var(--sbp-field-c) 0%, transparent 62%),
		var(--sbp-field-a);
	border-radius: var(--sbp-r-lg);
	padding: clamp(18px, 3vw, 30px) clamp(16px, 2.6vw, 28px);
	margin: clamp(10px, 1.6vw, 16px) 0;
}

/* ── DEEP — the statement band. Ink/mut remapped by cascade so text in
      the band reads on the contrast surface; inner cards keep their own
      surface + ink because they redeclare both. Used sparingly (density
      law): no Starter section defaults to deep in v1 — the Shop banner
      and bridge are its first residents. ─────────────────────────────── */
.sbp-page .sbp-tone--deep {
	--sbp-ink: var(--sbp-deep-ink-x);
	--sbp-mut: color-mix(in srgb, var(--sbp-deep-ink-x) 72%, var(--sbp-deep-x));
	background: var(--sbp-deep-x);
	border-radius: var(--sbp-r-lg);
	padding: clamp(20px, 3.4vw, 34px) clamp(16px, 2.6vw, 28px);
	margin: clamp(10px, 1.6vw, 16px) 0;
}

/* ── ACTION — the decisive section (contact/closer): companion wash with
      the action role stated on its leading edge. ─────────────────────── */
.sbp-page .sbp-tone--action {
	background: var(--sbp-soft-x);
	border-left: 3px solid var(--sbp-org-display);
	border-radius: var(--sbp-r-lg);
	padding: clamp(18px, 3vw, 30px) clamp(16px, 2.6vw, 28px);
	margin: clamp(10px, 1.6vw, 16px) 0;
}

/* Splash law — one small artistic interruption per surface, never a soak.
   Components opt in with .sbp-splash-dot / .sbp-splash-edge. */
.sbp-page .sbp-splash-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--sbp-splash-x);
}
.sbp-page .sbp-splash-edge { border-top: 3px solid var(--sbp-splash-x); }

/* Focus glow follows the palette's atmosphere. */
.sbp-page :focus-visible { outline-color: var(--sbp-glow, var(--sbp-focus)); }