/* Design tokens, reset and base typography. Everything else reads from here. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0b0b0d;
  --surface: #151518;
  --surface-2: #1e1e22;
  --surface-3: #2a2a30;
  --material: rgb(24 24 28 / .72);

  /* Text */
  --text: #f5f5f7;
  --text-2: rgb(235 235 245 / .62);
  --text-3: rgb(235 235 245 / .56);
  --sep: rgb(255 255 255 / .09);
  --fill: rgb(255 255 255 / .08);
  --fill-hover: rgb(255 255 255 / .13);

  /* Accent: one system tint, plus the destructive colour */
  --accent: #e02a45;
  --accent-text: color-mix(in srgb, var(--accent) 60%, #fff);
  --on-accent: #fff;
  --danger: #ff5a52;

  /* Artwork-derived (overridden per page by media.php / palette_vars) */
  --artwork-primary: hsl(230 14% 26%);
  --artwork-secondary: hsl(250 12% 20%);
  --artwork-bg: hsl(230 14% 13%);
  --artwork-glow: hsl(230 14% 46%);
  --artwork-text: #fff;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  --shadow-pop: 0 18px 50px rgb(0 0 0 / .45), 0 0 0 .5px rgb(255 255 255 / .1);
  --blur: saturate(1.6) blur(24px);

  /* Type: platform system fonts (SF Pro on Apple, Segoe UI Variable on Windows) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, sans-serif;

  /* Spacing (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --gutter: 16px;

  /* Motion */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* Chrome geometry */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: calc(52px + var(--safe-top));
  --tabbar-h: calc(54px + var(--safe-bottom));
  --nav-w: 0px;
  --content-max: 1280px;
  --feed-max: 100%;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f5f7;
    --surface: #fff;
    --surface-2: #ececf0;
    --surface-3: #dedee4;
    --material: rgb(250 250 252 / .74);
    --text: #1d1d1f;
    --text-2: rgb(60 60 67 / .76);
    --text-3: rgb(60 60 67 / .74);
    --sep: rgb(0 0 0 / .1);
    --fill: rgb(0 0 0 / .06);
    --fill-hover: rgb(0 0 0 / .1);
    --accent: #d9243d;
    --accent-text: color-mix(in srgb, var(--accent) 78%, #000);
    --shadow-pop: 0 18px 50px rgb(0 0 0 / .18), 0 0 0 .5px rgb(0 0 0 / .1);
  }
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f7;
    --surface: #fff;
    --surface-2: #ececf0;
    --surface-3: #dedee4;
    --material: rgb(250 250 252 / .74);
    --text: #1d1d1f;
    --text-2: rgb(60 60 67 / .76);
    --text-3: rgb(60 60 67 / .74);
    --sep: rgb(0 0 0 / .1);
    --fill: rgb(0 0 0 / .06);
    --fill-hover: rgb(0 0 0 / .1);
    --accent: #d9243d;
    --accent-text: color-mix(in srgb, var(--accent) 78%, #000);
    --shadow-pop: 0 18px 50px rgb(0 0 0 / .18), 0 0 0 .5px rgb(0 0 0 / .1);
}


@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 820px) { :root { --gutter: 32px; --nav-w: 84px; --topbar-h: 60px; --tabbar-h: 0px; } }
@media (min-width: 1180px) { :root { --gutter: 40px; --nav-w: 248px; } }

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.4 var(--font);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { color: inherit; font: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: -80px; left: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; transition: top var(--t-fast); }
.skip-link:focus { top: calc(12px + var(--safe-top)); }

/* thin, quiet scrollbars on desktop */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgb(128 128 140 / .4) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgb(128 128 140 / .35); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgb(128 128 140 / .6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Cross-document view transitions (progressive enhancement). Chrome persists; the shell stays put. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease); }
::view-transition-group(hero) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; }
.tabbar, .nav-side { view-transition-name: chrome; }
::view-transition-group(chrome) { animation: none; }

/* Artist pages are always dark: the artwork-derived wash needs a dark base to read as light cast by the artwork. */
.artist {
  color-scheme: dark; color: var(--text);
  --bg: #0b0b0d; --surface: #151518; --surface-2: #1e1e22; --surface-3: #2a2a30;
  --text: #f5f5f7; --text-2: rgb(235 235 245 / .62); --text-3: rgb(235 235 245 / .56);
  --sep: rgb(255 255 255 / .09); --fill: rgb(255 255 255 / .08); --fill-hover: rgb(255 255 255 / .13);
  --accent-text: color-mix(in srgb, var(--accent) 60%, #fff);
}

/* True-black theme for OLED screens */
:root[data-theme="black"] { color-scheme: dark; --bg: #000; --surface: #0a0a0b; --surface-2: #141416; --surface-3: #232326; --material: rgb(8 8 9 / .74); }

/* Accent presets (Settings → Appearance) */
:root[data-accent="blue"] { --accent: #0a6fe0; }
:root[data-accent="green"] { --accent: #178a3a; }
:root[data-accent="orange"] { --accent: #ff8a1f; --on-accent: #111; }
:root[data-accent="purple"] { --accent: #8a45f0; }
:root[data-accent="mono"] { --accent: #6e6e73; --on-accent: #fff; }