/* =============================================================
   NowPlaying 2.0 — Design Tokens (UX-spec sectie 3)
   Brand-primary: fuchsia (#C026D3), merk-neutraal, ≠ Twitch ≠ Discord
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand (themeable via Tweaks) ---- */
  --brand-h: 293;
  --brand-s: 72%;
  --brand-l: 49%;
  --color-brand-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --color-brand-secondary: hsl(var(--brand-h) calc(var(--brand-s) - 6%) 62%);
  --color-brand-strong: hsl(var(--brand-h) var(--brand-s) 40%);
  --color-brand-glow: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.30);
  --color-brand-tint: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.12);
  --color-brand-tint-strong: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.22);
  --color-text-on-brand: #ffffff;

  /* ---- Platform brand colors (statisch, niet themeable) ---- */
  --color-platform-spotify: #1DB954;
  --color-platform-twitch: #9146FF;
  --color-platform-discord: #5865F2;
  --color-platform-google: #4285F4;
  --color-platform-youtube: #FF0000;
  --color-platform-apple-music: #FC3C44;
  --color-platform-lastfm: #D51007;
  --color-platform-tiktok: #010101;
  --color-platform-tiktok-accent: #EE1D52;

  /* ---- Type ---- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---- Radius ---- */
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

  /* ---- Motion ---- */
  --duration-fast: 100ms; --duration-normal: 200ms; --duration-moderate: 300ms;
  --duration-slow: 500ms; --duration-deliberate: 700ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --content-max: 1280px;
  --nav-height: 64px;
}

/* ===================== DARK (default) ===================== */
:root,
[data-theme='dark'] {
  color-scheme: dark;
  --color-surface-base: #0F0F0F;
  --color-surface-raised: #1A1A1A;
  --color-surface-overlay: #242424;
  --color-surface-sunken: #0A0A0A;

  --color-text-primary: #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary: #6B7280;
  --color-text-disabled: #374151;
  --color-text-inverse: #111827;

  --color-border-default: #2D2D2D;
  --color-border-strong: #4B5563;

  --color-success-50: #052E16;  --color-success-500: #4ADE80; --color-success-900: #DCFCE7;
  --color-warning-50: #1C1200;  --color-warning-500: #FACC15; --color-warning-900: #FEF9C3;
  --color-error-50: #1C0A0A;    --color-error-500: #F87171;   --color-error-900: #FEE2E2;
  --color-info-50: #0A1628;     --color-info-500: #60A5FA;    --color-info-900: #DBEAFE;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.6), 0 10px 16px rgba(0,0,0,0.4);
  --skeleton-a: #1A1A1A; --skeleton-b: #242424;
}

/* ===================== LIGHT ===================== */
[data-theme='light'] {
  color-scheme: light;
  --color-surface-base: #FFFFFF;
  --color-surface-raised: #F9FAFB;
  --color-surface-overlay: #FFFFFF;
  --color-surface-sunken: #F3F4F6;

  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-text-disabled: #D1D5DB;
  --color-text-inverse: #FFFFFF;

  --color-border-default: #E5E7EB;
  --color-border-strong: #9CA3AF;

  --color-success-50: #F0FDF4;  --color-success-500: #22C55E; --color-success-900: #14532D;
  --color-warning-50: #FFFBEB;  --color-warning-500: #EAB308; --color-warning-900: #713F12;
  --color-error-50: #FEF2F2;    --color-error-500: #EF4444;   --color-error-900: #7F1D1D;
  --color-info-50: #EFF6FF;     --color-info-500: #3B82F6;    --color-info-900: #1E3A8A;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --skeleton-a: #F3F4F6; --skeleton-b: #E5E7EB;
}

/* ===================== BASE RESET ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); margin: 0; font-weight: 600; }
p { margin: 0; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-brand-tint-strong); }

/* Type scale utility classes */
.t-display-2xl { font-family: var(--font-display); font-size: 72px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.t-display-xl  { font-family: var(--font-display); font-size: 60px; line-height: 1.07; font-weight: 700; letter-spacing: -0.02em; }
.t-display-lg  { font-family: var(--font-display); font-size: 48px; line-height: 1.1;  font-weight: 600; letter-spacing: -0.015em; }
.t-display-md  { font-family: var(--font-display); font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.t-display-sm  { font-family: var(--font-display); font-size: 30px; line-height: 1.2;  font-weight: 600; }
.t-display-xs  { font-family: var(--font-display); font-size: 24px; line-height: 1.3;  font-weight: 600; }
.t-xl { font-size: 20px; line-height: 1.4; }
.t-lg { font-size: 18px; line-height: 1.5; }
.t-md { font-size: 16px; line-height: 1.5; }
.t-sm { font-size: 14px; line-height: 1.5; }
.t-xs { font-size: 12px; line-height: 1.5; }
.t-secondary { color: var(--color-text-secondary); }
.t-tertiary { color: var(--color-text-tertiary); }
.mono { font-family: var(--font-mono); }

/* Skeleton shimmer */
@keyframes np-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.np-skeleton {
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%);
  background-size: 200% 100%;
  animation: np-shimmer 1500ms infinite linear;
  border-radius: var(--radius-md);
}
@keyframes np-spin { to { transform: rotate(360deg); } }
@keyframes np-pulse-glow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes np-art-pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--np-accent, var(--color-brand-primary)); }
  50% { box-shadow: 0 0 16px 2px var(--color-brand-glow); }
}
@keyframes np-song-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes np-song-slide { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes np-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes np-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-modal-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes np-toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes np-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes np-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes np-wave { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* Focus ring */
:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* Scrollbar (dark friendly) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  background: var(--color-brand-primary); color: #fff; padding: 8px 16px;
  border-radius: var(--radius-md); z-index: 2000; transition: transform var(--duration-normal) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

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