/* Undersong: the product layer over the BSHK Design System.

   Load order: _ds/bshk-design-system-500adf1e-c43a-446e-841e-d0e4593b892d/styles.css, then this file.
   The page root carries data-theme="dark" data-product="undersong" data-surface="undersong".

   Only values BSHK does not have live here. Spacing (--space-*), radii (--radius-*), shadows
   (--shadow-*), blur, motion (--dur-*, --ease-*), fonts (--font-system, --font-mono,
   --mac-font-mono), the type scale (--text-av-*, --text-h2, --text-lead, --text-overline),
   weights, leading, tracking, status colours (--status-*), the dark page (--bg) and the header
   (--header-bg, --header-border) all come from BSHK under their own names.

   Phone layout starts below 640px (--und-bp-mobile). Media queries cannot read custom
   properties, so the stylesheet repeats that number in its @media rules. */

/* Accent triplet, the same pattern as the other BSHK products in tokens/products.css */
[data-product="undersong"]{
  --accent:#8f9cf0;
  --accent-hover:#aab4ff;
  --on-accent:#15161f;
  --button-shadow:rgba(143,156,240,0.22);
  --accent-glow:rgba(143,156,240,0.13);
}

/* Surfaces shared by the menu-bar app and its website, like MurMur's --mur-* set */
[data-surface="undersong"]{
  /* grounds, darkest to lightest; the page itself is BSHK --bg */
  --und-field:#141416;
  --und-panel:#1d1d1f;
  --und-raised:#26262a;

  /* ink and lines */
  --und-ink:rgba(255,255,255,0.94);
  --und-muted:rgba(255,255,255,0.58);
  --und-faint:rgba(255,255,255,0.4);
  --und-line:rgba(255,255,255,0.1);
  --und-edge:rgba(255,255,255,0.12);
  --und-hover:rgba(255,255,255,0.04);
  --und-fill:rgba(255,255,255,0.08);
  --und-fill-strong:rgba(255,255,255,0.16);

  /* accent washes */
  --und-accent-soft:rgba(143,156,240,0.16);
  --und-accent-line:rgba(143,156,240,0.45);
  --und-glow:radial-gradient(640px 380px at 50% 0%,var(--accent-glow),transparent 70%);

  /* native selection: sidebar row, highlighted menu item */
  --und-select:#5563d8;
  --und-on-select:#ffffff;

  /* overlays and status washes built on BSHK status colours */
  --und-scrim:rgba(0,0,0,0.45);
  --und-warn-soft:color-mix(in srgb,var(--status-warning) 12%,transparent);
  --und-warn-line:color-mix(in srgb,var(--status-warning) 30%,transparent);
  --und-danger-soft:color-mix(in srgb,var(--status-danger) 12%,transparent);
  --und-disabled:0.4;

  /* small text BSHK has no step for: the native windows and dense labels */
  --und-text-2xs:10px;
  --und-text-xs:11px;
  --und-text-sm:12px;
  --und-text-md:13px;
  --und-text-lg:14px;
  --und-text-xl:16px;

  /* icon and mood-symbol strokes */
  --und-icon-stroke:1.3;
  --und-icon-stroke-bold:2;
  --und-glyph-stroke:1.1;

  /* layout the BSHK shell does not cover */
  --und-rail:220px;
  --und-card-min:240px;
  --und-dialog:440px;
  --und-dialog-lg:520px;
  --und-player:660px;
  --und-bp-mobile:640px;

  /* native app geometry */
  --und-popover-w:320px;
  --und-popover-h:440px;
  --und-window-w:760px;
  --und-window-h:560px;
  --und-window-rail:208px;
  --und-sheet-w:452px;
  --und-row:32px;

  /* the pulsing dot for "opening" and "making" */
  --und-pulse:1.6s;
}