/**
 * App theme — the `@layer theme` slot, loaded last and out-ranking everything
 * below it. Design tokens only; structural CSS lives in `app.css`.
 */

@layer theme {
  :root {
    --player-height: 88px;
    /* Zero, not var(--s3): every page container (.library, .settings, …)
       applies its own padding, and doubling them up indents twice */
    --main-padding: 0;

    --primaryH: 262;
    --primaryS: 50%;
    --primaryL: 60%;

    --borderH: 262;
    --borderS: 35%;
    --borderL: 82%;

    --br-sm: 0rem;
    --br-base: 0rem;
    --br-lg: 0rem;
    --br-xl: 0rem;

    /* App-local accents composed from civility tokens */
    --hover-tint: var(--primary-dull);
    --playing-tint: color-mix(in srgb, var(--primary) 35%, transparent);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --primaryL: 66%;
      --borderL: 28%;
    }
  }

  :root[data-theme='dark'] {
    --primaryL: 66%;
    --borderL: 28%;
  }
}