/*
 * notch — SKIN. The only file you edit.
 *
 * Every value here is scoped to the element's own class (never :root), and
 * every structural rule in notch.css reads one of these with a fallback.
 *
 * The pill's SURFACE is black by nature — it stands in for hardware, and stays
 * black on light and dark pages alike; the white hairline stroke and shadow are
 * what define its edge against a dark wallpaper. Rebrand by changing the accent
 * (and its soft), not the surface.
 */

.sp-notch {
  /* surface — the "hardware" */
  --sp-notch-surface: #000000;
  --sp-notch-stroke: rgba(255, 255, 255, 0.14);
  --sp-notch-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sp-notch-shadow-float: 0 18px 50px rgba(0, 0, 0, 0.5);
  --sp-notch-z: 60;

  /* ink ladder on black */
  --sp-notch-ink: #ffffff;
  --sp-notch-ink-muted: rgba(255, 255, 255, 0.62);

  /* accent — brandable. Defaults to the Soft Product accent. */
  --sp-notch-accent: var(--accent, #3b82f6);
  --sp-notch-accent-soft: rgba(59, 130, 246, 0.18);

  /* content footprint */
  --sp-notch-art: 22px;          /* compact leading glyph tile */
  --sp-notch-art-lg: 56px;       /* expanded artwork tile */

  /* content-swap compensation. The blur values are the native ones
     (compact 40 / expanded 20); scale is 0.4 × 0.6 on both axes; compact
     holds full opacity, expanded fades to 0. --sp-notch-swap is written
     inline by notch.js from the active preset's openResponse, so the fallback
     here is only the no-JS default (balanced). */
  --sp-notch-swap: 0.5s;
  --sp-notch-blur: 40px;
  --sp-notch-from-opacity: 1;    /* compact: hold 1. Expanded swaps set this to 0. */
  --sp-notch-scale-x: 0.4;
  --sp-notch-scale-y: 0.6;
  --sp-notch-off-x: 0px;         /* fed per-frame by JS: -(width * 3/13) */
  --sp-notch-off-y: 0px;         /* fed per-frame by JS: -((height - baseHeight) / 2) */
}

/* Dark pages: the pill stays black, but the shadow deepens so it still lifts
   off a near-black wallpaper, and the stroke reads a touch brighter. */
.dark .sp-notch,
[data-theme="dark"] .sp-notch {
  --sp-notch-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  --sp-notch-shadow-float: 0 18px 50px rgba(0, 0, 0, 0.7);
  --sp-notch-stroke: rgba(255, 255, 255, 0.18);
}