/* ============================================================
   Singular Brand Bridge
   ------------------------------------------------------------
   Maps Travellarz's own design tokens (css/transfo-ui.css) onto the
   --brand- and --font- token families a Singular Library component expects.

   Why this is needed: a Singular component's CSS reads
   var(--brand-primary, <its own hardcoded fallback hex>) — never a
   fixed color. SingularLibraryLoader's preview-base.css supplies real
   fallback values for those tokens, but inserts itself FIRST in <head>
   specifically so any host page's own :root declaration — this file —
   lands later in source order and wins the cascade (see
   singular-library-loader.js's ensureBaseCss() for the mechanism).
   Without this file, an embedded component silently renders in
   Singular's own default palette instead of Travellarz's teal, because
   Travellarz never defined the --brand-* names Singular's CSS is
   actually looking for — the two systems just use different token
   vocabularies, not incompatible ones.

   Include this AFTER css/transfo-ui.css on any page that renders a
   component via SingularLibraryLoader/SingularLiveData.
   ============================================================ */
:root {
  --brand-primary: var(--accent);
  --brand-primary-dark: var(--accent);
  --brand-primary-light: var(--accent-soft, var(--accent));
  --brand-secondary: var(--accent);
  --brand-accent: var(--accent);
  --brand-bg: var(--bg);
  --brand-surface: var(--panel);
  --brand-surface-raised: var(--panel-2, var(--panel));
  --brand-text: var(--text);
  --brand-text-muted: var(--muted);
  --brand-border: var(--border);
  --brand-radius: var(--radius);
  --brand-radius-sm: var(--radius-sm);
  --font-heading: var(--font);
  --font-body: var(--font);
}