/* Design tokens: the single source for colours, type, spacing, radii, shadows and motion. */
:root {
  /* Surfaces */
  --bg: #000;
  --panel: #121212;
  --raised: #1f1f1f;
  --hover: #2a2a2a;
  --highlight: #333;
  --track: #4d4d4d;

  /* Text */
  --text: #fff;
  --muted: #b3b3b3;
  --faint: #7c7c7c;
  --on-image: #fff;
  --on-image-muted: #e0e0e0;
  --page-tint-opacity: 1;
  --mini-tint-strength: 100%;

  /* Brand and status */
  --accent: #1ed760;
  --accent-hover: #3be477;
  --accent-ink: #000;
  --danger: #f15e6c;
  --info: #2568ba;

  /* Type */
  --font: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 24px;
  --fs-xl: 32px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Radii */
  --r-art: 4px;
  --r-menu: 6px;
  --r-panel: 8px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-play: 0 8px 8px rgba(0, 0, 0, .3);
  --shadow-menu: 0 16px 24px rgba(0, 0, 0, .3), 0 6px 8px rgba(0, 0, 0, .2);
  --shadow-art: 0 4px 60px rgba(0, 0, 0, .5);

  /* Motion */
  --ease: cubic-bezier(.3, 0, 0, 1);
  --t-press: 100ms;
  --t-fast: 200ms;
  --t-panel: 300ms;

  /* Layers */
  --z-link: 1;
  --z-control: 2;
  --z-sticky: 5;
  --z-menu: 40;
  --z-dialog: 50;
  --z-tooltip: 60;
  --z-toast: 70;
}

:root[data-theme="light"] {
  --page-tint-opacity: .15;
  --mini-tint-strength: 15%;
  --bg: #e9e9e9;
  --panel: #fff;
  --raised: #f2f2f2;
  --hover: #e4e4e4;
  --highlight: #d8d8d8;
  --track: #c8c8c8;
  --text: #121212;
  --muted: #5f5f5f;
  --faint: #8a8a8a;
  --accent: #087f36;
  --accent-hover: #076b2e;
  --accent-ink: #fff;
  --danger: #c4283b;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --page-tint-opacity: .15; --mini-tint-strength: 15%;
    --bg: #e9e9e9; --panel: #fff; --raised: #f2f2f2; --hover: #e4e4e4; --highlight: #d8d8d8; --track: #c8c8c8;
    --text: #121212; --muted: #5f5f5f; --faint: #8a8a8a;
    --accent: #087f36; --accent-hover: #076b2e; --accent-ink: #fff; --danger: #c4283b;
  }
}

/* Everything that moves honours the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-fast: 0ms; --t-panel: 0ms; }
}