/* Sakura Sync version2 — 春日節奏編曲計畫 design tokens.
   Copied verbatim from plans/sakura-sync-kawaii-music-git-ui-ux-plan.md §9.3
   (the UI/UX plan is the single source of truth for color — this file must
   not fork its own palette), plus spacing/typography/motion tokens needed
   to build the actual screens. */
:root {
  --bg-page: #fff7fa;
  --surface: #fffdfe;
  --surface-soft: #fde7ef;
  --text-main: #432738;
  --text-muted: #835a6b;
  --border-soft: #e9bdd0;

  --primary: #d94d82;
  --primary-shadow: #9f2b5d;
  --accent-pink: #f6a7c3;

  --git-modified: #b86412;
  --git-staged: #18744b;
  --git-committed: #216ba2;
  --git-branch: #6a35b8;
  --git-conflict: #c53d2e;
  --result-perfect: #9b6200;

  /* Per-lane (A/S/K/L) colors — must stay byte-for-byte identical to
     LANE_COLORS in js/renderer.js, which paints the falling notes in the
     rhythm test with these same 4 colors by lane index. timeline-editor.js
     sets --lane-color to one of these on each .timeline-lane row so a
     placed block on the timeline reads as the same color it'll fall as. */
  --lane-color-0: #f6a6c1;
  --lane-color-1: #77c8e8;
  --lane-color-2: #91d8c0;
  --lane-color-3: #bca6e8;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 28px rgba(176, 75, 116, 0.08);
  --shadow-card-hover: 0 14px 32px rgba(176, 75, 116, 0.14);
  --shadow-button: 0 5px 0 var(--primary-shadow);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --font-base: "Nunito", "Noto Sans TC", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-standard: linear;
  }
}