/* Design tokens read off the reference player via
   computed style. These are its literal values, not approximations. */

:root {
  color-scheme: dark;

  --accent: #fb2c5a;
  --accent-soft: #ff6f8b;

  --text: #f5f5f7;
  --text-muted: #a3a3ad;
  /* P9: was #6b6b76 at 3.99:1 — the reference's own value, but below 4.5 for
     the 11–14px captions that use it. #85858f reads 5.75:1 and stays visibly
     dimmer than --text-muted, so the text > muted > dim ramp survives. */
  --text-dim: #85858f;

  --page: #000000;

  /* Two ambient washes are what keep a black page from reading as flat. */
  --bg-glow-1: #fb2c5a38;
  --bg-glow-2: #7850ff2e;

  /* Glass comes in five weights. Each has a translucent fill for when
     backdrop-filter is available, a flat fill for when it is not, and an
     opaque one for surfaces that must not show anything through. */
  --glass-bg: #12141b6b;
  --glass-bg-bar: #07080b85;
  --glass-bg-floating: #12141c70;
  --glass-bg-strong: #1012197a;
  --glass-bg-subtle: #ffffff0f;

  --glass-flat: #181a22d6;
  --glass-flat-bar: #090a0de0;
  --glass-flat-floating: #1a1c26db;
  --glass-flat-strong: #161820e0;
  --glass-flat-subtle: #ffffff17;

  --glass-solid: #181a22f0;
  --glass-solid-bar: #090a0dfa;
  --glass-solid-floating: #1c1e28f5;
  --glass-solid-strong: #161820f7;
  --glass-solid-subtle: #282a34e6;

  /* The saturation boost is the important part: blurring desaturates, and
     putting the colour back is what makes a panel pick up the hue of the
     artwork behind it rather than going grey. */
  --glass-frost: blur(38px) saturate(210%) brightness(1.08);
  --glass-frost-bar: blur(36px) saturate(200%) brightness(1.1);
  --glass-frost-floating: blur(44px) saturate(220%) brightness(1.12);
  --glass-frost-strong: blur(46px) saturate(220%) brightness(1.1);
  --glass-frost-subtle: blur(24px) saturate(180%) brightness(1.04);

  --glass-border: #ffffff2e;
  --glass-sheen: #ffffff1f;

  /* Now playing derives its colours from the artwork; these are the
     defaults before a track is loaded. */
  --np-text: #ffffff;
  --np-lyric-shadow: 0 1px 14px #0000008c, 0 1px 2px #0006;

  --top-bar-h: 3.5rem;
  --sidebar-w: 256px;
  --player-h: 88px;

  /* Corner radius, measured off the live site rather than chosen.
     The reference's artwork radius is a flat 36px, not a proportion — a 176px
     cover and a 224px cover both use it — so large artwork gets one value
     regardless of size, and only small thumbnails step down to 14px.
     These had been hardcoded in app.css with no token, which is how they
     drifted to 8px and flattened the whole UI. */
  /* Their surface ramp, and the easing curves behind every transition. */
  --surface: #0a0a0c;
  --surface-2: #141417;
  --surface-3: #1c1c20;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Their radius scale is sm 10 / md 14 / lg 20 / xl 28 / 2xl 36 / 3xl 24.
     The names below are what each is actually used for here; every value
     matches theirs. */
  --radius-art: 36px;      /* artwork and content cards in grids and shelves */
  --radius-art-lg: 24px;   /* the one large feature cover on album and now-playing */
  --radius-art-sm: 14px;   /* thumbnails, roughly 40-56px */
  --radius-tile: 20px;     /* wide quick-link tiles (273x60 on the reference) */
  --radius-row: 28px;      /* row hover surfaces */
  --radius-pill: 9999px;

  --font: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont,
    "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  /* Negative tracking at every size. A large part of why the reference does
     not read as a default browser page. */
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

/* These four are the reference's own rules, read from the stylesheet it
   serves rather than inferred. The part we had been missing is the gradient
   laid over the fill: a bright top edge falling to nothing by 58%. Without it
   a translucent panel reads as a tinted box. The outer shadow matters too —
   it is what lifts a floating panel off the page. */
.glass {
  background: linear-gradient(180deg, #ffffff1a, #ffffff05 30%, #fff0 58%),
    var(--glass-bg);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px #ffffff29, inset 0 -1px #0000002e,
    0 12px 40px -20px #0009;
}

.glass-bar {
  background: linear-gradient(180deg, #ffffff1c, #ffffff08 42%, #fff0 78%),
    var(--glass-bg-bar);
  backdrop-filter: var(--glass-frost-bar);
  -webkit-backdrop-filter: var(--glass-frost-bar);
  box-shadow: inset 0 1px #ffffff24, inset 0 -1px #00000038;
}

.glass-strong {
  background: linear-gradient(180deg, #ffffff1c, #ffffff05 28%, #fff0 56%),
    var(--glass-bg-strong);
  backdrop-filter: var(--glass-frost-strong);
  -webkit-backdrop-filter: var(--glass-frost-strong);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px #ffffff2e, inset 0 -1px #0003, 0 18px 52px -24px #0000;
}

.glass-floating {
  background: linear-gradient(180deg, #ffffff26, #ffffff0a 34%, #fff0 64%),
    var(--glass-bg-floating);
  backdrop-filter: var(--glass-frost-floating);
  -webkit-backdrop-filter: var(--glass-frost-floating);
  border: 1px solid color-mix(in oklab, var(--glass-border) 135%, transparent);
  box-shadow: inset 0 1px #fff3, inset 0 -1px #0003, 0 18px 48px -16px #000000b3;
}

.glass-subtle {
  background: var(--glass-bg-subtle);
  backdrop-filter: var(--glass-frost-subtle);
  -webkit-backdrop-filter: var(--glass-frost-subtle);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: linear-gradient(180deg, #ffffff1a, #ffffff05 30%, #fff0 58%),
      var(--glass-flat);
  }
  .glass-bar {
    background: linear-gradient(180deg, #ffffff1c, #ffffff08 42%, #fff0 78%),
      var(--glass-flat-bar);
  }
  .glass-strong {
    background: linear-gradient(180deg, #ffffff1c, #ffffff05 28%, #fff0 56%),
      var(--glass-flat-strong);
  }
  .glass-floating {
    background: linear-gradient(180deg, #ffffff26, #ffffff0a 34%, #fff0 64%),
      var(--glass-flat-floating);
  }
  .glass-subtle { background: var(--glass-flat-subtle); }
}