/* Design tokens — aligned with nail-implementation-package portal/player reference. */
:root {
  --ink: #15171b;
  --muted: #68717d;
  --line: #dce2e8;
  --line-strong: #cbd3dc;
  --canvas: #f4f6f8;
  --panel: #fff;
  --soft: #eef2f6;
  --blue: #2463dc;
  --blue-soft: #eaf1ff;
  --green: #14865b;
  --green-soft: #e8f6ef;
  --amber: #a5670a;
  --amber-soft: #fff3dc;
  --red: #bf3f46;
  --red-soft: #fff0f1;
  --purple: #7357c8;
  --purple-soft: #f1edff;
  --radius: 22px;
  --radius-control: 12px;
  --shadow: 0 18px 60px rgba(26, 35, 49, 0.08);
  --content-max: 1440px;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Back-compat aliases used by earlier scaffold CSS */
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-canvas: var(--canvas);
  --color-panel: var(--panel);
  --color-action: var(--blue);
  --color-action-soft: var(--blue-soft);
  --color-success: var(--green);
  --color-success-soft: var(--green-soft);
  --color-warning: var(--amber);
  --color-warning-soft: var(--amber-soft);
  --color-danger: var(--red);
  --color-danger-soft: var(--red-soft);
  --radius-card: var(--radius);
  --shadow-raised: var(--shadow);
}

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