/* ============================================================
   daycrunch® — pb-widgets (v2) theme
   ------------------------------------------------------------
   Maps the pb-widgets --pb-* token surface onto the daycrunch
   palette from daycrunch.css. Load AFTER daycrunch.css so the
   var(--orange) / var(--ink) references resolve.

   Unlike theme.css — which fights the legacy pbui widgets with
   !important because they render into the light DOM — pb-* renders
   inside a shadow root and exposes these tokens as its only public
   styling surface. No class selectors reach in, and none are needed.

   The tokens must NOT be declared on :root here: a widget carries
   each default as a var() fallback rather than a :host declaration,
   so :root works too — but naming the elements that read them keeps
   the tokens off every other element on the page. Every such element
   has to be listed, the overlay root included.
   ============================================================ */

/* Panel the widget sits in. Its own --pb-color-background matches, so the
   two read as one surface: sand section → white panel → cream cards. */
.pb-widget-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: clamp(14px, 2.2vw, 30px);
}

/* An undefined custom element is inline until its definition arrives. */
pb-asset-list,
pb-billing,
pb-demo {
  display: block;
}

/* .pb-overlay-root is the loader's own div, appended to <body> — every
   dialog, popover and select portals into it because Radix cannot run
   inside a shadow root. It is a sibling of the widget, not a descendant,
   so tag-scoped tokens never reach it and its stylesheet falls back to
   the widget's built-in teal. It has to be listed here by name, and it
   reads the tokens off itself, which is why declaring them on it works.

   --pb-color-success and --pb-color-destructive are left at the widget's
   own defaults: the billing status chips read as status, and the site
   palette has no green or red to map them onto. */
pb-asset-list,
pb-billing,
pb-lunch,
pb-demo,
.pb-overlay-root {
  --pb-color-primary: var(--orange);
  --pb-color-secondary: var(--orange-deep);
  --pb-color-accent: var(--blue);
  --pb-color-text-on-primary: #fff;

  --pb-color-background: var(--white);
  --pb-color-surface: var(--cream);
  --pb-color-border: var(--line);

  --pb-color-text: var(--ink);
  --pb-color-text-muted: var(--ink-soft);

  --pb-radius: var(--r-card);

  /* The site has no sans face — headings are Libre Baskerville,
       everything else Georgia. The widget follows the body copy. */
  --pb-font-sans: Georgia, "Times New Roman", serif;
}