/* Root aliases that re-point the app's product tokens (--accent, --bg, --serif
   and the rest) at the brand tokens in brand_tokens.css, for the whole
   document. Load it after brand_tokens.css and only where the page should
   take the brand palette (landing, blog, checkout email step, bot pages). */
:root {
  /* Preserve product token names to make adoption incremental. */
  --bg:var(--brand-canvas);--surface:var(--brand-paper);--surface2:var(--brand-wash);
  --border:var(--brand-line);--border-strong:var(--brand-line-strong);
  --text:var(--brand-ink);--text-secondary:var(--brand-secondary);--text-dim:var(--brand-muted);
  --accent:var(--brand-action);--accent-hover:var(--brand-action-hover);--accent-bg:#eef0f2;
  --card-bg:var(--brand-paper);--radius:var(--brand-radius);--radius-sm:var(--brand-radius-sm);
  --sans:var(--brand-ui);--serif:var(--brand-display);
  --ink:var(--brand-ink);--muted:var(--brand-muted);--line:var(--brand-line);
  --shadow-sm:0 1px 2px #08090a05;--shadow:0 4px 18px #08090a08;--shadow-lg:0 12px 40px #08090a14;
  --green:#0e6b52;--green-bg:rgba(14,107,82,.10);
  --red:#b3261e;--red-bg:rgba(179,38,30,.08);
  --yellow:#7a5a10;--yellow-bg:rgba(122,90,16,.10);
  --cyan:#2456b3;--cyan-bg:rgba(36,86,179,.08);
}