/* Plum theme tokens. See docs/design.md.
   Day (light) is the default; night (dark) follows the system setting. */
:root {
  --bg: #fbf5f8;
  --surface: #ffffff;
  --surface-2: #f4e8ef;
  --border: #e2cfda;
  --border-strong: #8f6f85;
  --text: #2a1426;
  --text-muted: #6b5066;
  --accent: #b0216e;
  --accent-ink: #ffffff;
  --focus: #1f5fd6;
  --shadow: 0 12px 36px rgba(42, 20, 38, 0.14);

  /* Tag category colours: the fixed palette a category picks from (keys are stored in the database).
     Each is >= 4.2:1 against --bg, --surface and --surface-2 in both themes */
  --tag-rose: #c2185b;
  --tag-plum: #8e44ad;
  --tag-amber: #a35f00;
  --tag-teal: #00796b;
  --tag-sky: #1e6fbf;
  --tag-lime: #4d7c0f;
  --tag-slate: #5f6b7a;

  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-pill: 999px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1220;
    --surface: #2a1a2e;
    --surface-2: #352239;
    --border: #4a3350;
    --border-strong: #94738f;
    --text: #f6e7ef;
    --text-muted: #bfa3b8;
    --accent: #ff6fb1;
    --accent-ink: #1d1220;
    --focus: #ffd166;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);

    --tag-rose: #ff7aa8;
    --tag-plum: #c58af0;
    --tag-amber: #f0b44c;
    --tag-teal: #4fd1bf;
    --tag-sky: #7cb8ff;
    --tag-lime: #a3d65c;
    --tag-slate: #a7b1bf;

    color-scheme: dark;
  }
}

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

body {
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

/* One focus ring for the whole site; --focus is used nowhere else */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Interface text isn't selectable, so swipes and sloppy taps don't highlight it.
   Content (titles, artist names, links) stays selectable. */
button,
nav,
label,
.ui-text {
  user-select: none;
  -webkit-user-select: none;
}

/* Content inside interface text (a .ui-text area) that people may want to copy. Fields stay usable too:
   older iOS Safari won't let you type into an input whose surroundings are -webkit-user-select: none */
.selectable,
.ui-text input,
.ui-text textarea {
  user-select: text;
  -webkit-user-select: text;
}

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

/* Text for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A scrolling list with its scrollbar hidden. The edge that has more content
   past it fades out, following the scroll position; a list that doesn't scroll
   gets no fade. Add .scroll-fade-x for a sideways list. Browsers without
   scroll-driven animations just show no fade */
.scroll-fade {
  scrollbar-width: none;
}

.scroll-fade::-webkit-scrollbar {
  display: none;
}

@property --fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@keyframes scroll-fades {
  0% {
    --fade-start: 0px;
    --fade-end: 3rem;
  }
  8% {
    --fade-start: 3rem;
  }
  92% {
    --fade-end: 3rem;
  }
  100% {
    --fade-start: 3rem;
    --fade-end: 0px;
  }
}

@supports (animation-timeline: scroll()) {
  .scroll-fade {
    --fade-dir: to bottom;
    mask-image: linear-gradient(
      var(--fade-dir),
      transparent,
      #000 var(--fade-start),
      #000 calc(100% - var(--fade-end)),
      transparent
    );
    animation: scroll-fades linear both;
    animation-timeline: scroll(self block);
  }

  .scroll-fade.scroll-fade-x {
    --fade-dir: to right;
    animation-timeline: scroll(self inline);
  }
}

/* Form controls: themed defaults; components can override with a class */
button,
select,
input,
textarea {
  font: inherit;
  font-size: 1rem; /* 16px+ stops iOS zooming on focus */
  color: var(--text);
}

button {
  min-height: 44px;
  padding: 0 var(--space-md, 16px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

select,
input,
textarea {
  min-height: 44px;
  padding: 0 var(--space-sm, 12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (hover: hover) {
  button:not(:disabled):hover {
    border-color: var(--accent);
  }
}