/* ===========================================================================
   Yume Design Tokens — single source of truth for every client surface.
   Generated values also exist as JSON (tokens.json) for native platforms.

   Identity: rooted in the original Hayase look — pure black surfaces,
   near-white type, the signature rose accent (hsl 346.6 79% 51%), Nunito.
   =========================================================================== */

:root {
  /* ---- color primitives ---- */
  --ink-black: hsl(0 0% 0%);
  --ink-950: hsl(0 0% 2%);
  --ink-900: hsl(0 0% 4%);
  --ink-850: hsl(0 0% 7%);
  --ink-800: hsl(0 0% 10%);
  --ink-700: hsl(0 0% 15%);
  --ink-400: hsl(0 0% 50%);
  --ink-200: hsl(0 0% 75%);
  --ink-50: hsl(0 0% 98%);

  --rose-500: hsl(346.6 79.1% 51.2%);  /* signature accent */
  --rose-600: hsl(346.6 79.1% 44%);
  --green-500: hsl(142 70% 45%);
  --red-500: hsl(0 72% 51%);
  --blue-500: hsl(215 90% 60%);
  --violet-500: hsl(260 80% 65%);
  --amber-500: hsl(40 90% 55%);

  /* Lighter steps of the semantic hues. These exist because badge text needs
     more lift than a fill does: on a near-black surface the 500 step reads as
     muddy at small sizes. style.css referenced them with hardcoded hex
     fallbacks, which meant those badges silently left the token system and
     could not follow a theme. */
  --green-400: hsl(142 68% 58%);
  --amber-400: hsl(40 92% 66%);
  --red-400: hsl(0 78% 66%);
  --blue-400: hsl(215 92% 70%);

  /* ---- semantic: dark (default) ---- */
  --bg: var(--ink-black);
  --bg-raised: var(--ink-900);          /* cards, rails */
  --bg-overlay: var(--ink-900);         /* modals, popovers */
  --bg-sunken: var(--ink-black);        /* player background, wells */
  --fg: var(--ink-50);
  --fg-muted: var(--ink-200);
  --fg-faint: var(--ink-400);
  --border: var(--ink-800);
  --border-strong: var(--ink-700);
  --accent: var(--rose-500);
  --accent-hover: var(--rose-600);
  --accent-fg: hsl(0 0% 100%);          /* text on accent */
  --accent-soft: hsl(346.6 79% 51% / .14);
  --primary: var(--ink-50);             /* Hayase-style light primary button */
  --primary-fg: hsl(0 0% 10%);
  --ok: var(--green-500);
  --danger: var(--red-500);
  --info: var(--blue-500);
  --live: var(--violet-500);

  /* ---- status colors (library states) ---- */
  --status-watching: var(--green-500);
  --status-planning: var(--blue-500);
  --status-completed: var(--violet-500);
  --status-paused: var(--amber-500);
  --status-dropped: var(--red-500);

  /* ---- typography ---- */
  --font-sans: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.185rem;
  --text-xl: 1.42rem;
  --text-2xl: 1.7rem;
  --text-3xl: 2.5rem;
  --weight-normal: 400;
  --weight-medium: 600;
  /* semibold and extrabold were used in style.css and never defined, so every
     rule that asked for one was invalid and the element fell back to whatever
     it inherited. Named here rather than rewritten at each call site: the
     scale wanted six steps, not four. */
  --weight-semibold: 650;
  --weight-bold: 700;
  --weight-extrabold: 780;
  --weight-black: 800;
  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* ---- spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- radii (Hayase-scale: subtle) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;                    /* large empty states and placeholders */
  --radius-full: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 3px hsl(0 0% 0% / .6);
  --shadow-2: 0 6px 20px hsl(0 0% 0% / .55);
  --shadow-3: 0 16px 48px hsl(0 0% 0% / .7);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;

  /* ---- layout ---- */
  --sidebar-w: 3.5rem;
  --sidebar-w-expanded: 3.5rem;
  --content-max: 90rem;
  --card-w: 10.5rem;
  --card-ratio: 2 / 3;

  color-scheme: dark;
}

/* ---- light mode ---- */
[data-theme='light'] {
  --bg: hsl(0 0% 100%);
  --bg-raised: hsl(0 0% 96%);
  --bg-overlay: hsl(0 0% 100%);
  --bg-sunken: hsl(0 0% 92%);
  --fg: hsl(0 0% 4%);
  --fg-muted: hsl(0 0% 25%);
  --fg-faint: hsl(0 0% 45%);
  --border: hsl(0 0% 86%);
  --border-strong: hsl(0 0% 74%);
  --accent-soft: hsl(346.6 79% 51% / .12);
  --primary: hsl(0 0% 8%);
  --primary-fg: hsl(0 0% 100%);

  /* The 400 steps exist to lift small text off a near-black surface. On white
     they do the opposite — a light green on white is barely there — so here
     they go darker than the 500 rather than lighter. Same token, same job
     (readable status text), opposite direction. */
  --green-400: hsl(142 72% 30%);
  --amber-400: hsl(40 95% 33%);
  --red-400: hsl(0 74% 43%);
  --blue-400: hsl(215 88% 44%);
  --shadow-1: 0 1px 3px hsl(0 0% 0% / .12);
  --shadow-2: 0 6px 20px hsl(0 0% 0% / .14);
  --shadow-3: 0 16px 48px hsl(0 0% 0% / .2);
  color-scheme: light;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}