@layer imago.tokens {
:root {
  --im3-canvas: #f6f7f9;
  --im3-surface-raised: #ffffff;
  --im3-surface: #ffffff;
  --im3-surface-subtle: #f1f3f6;
  --im3-ink: #14171f;
  --im3-muted: #687083;
  --im3-line: rgba(20, 23, 31, 0.1);
  --im3-line-strong: rgba(20, 23, 31, 0.18);
  --im3-accent: #0a78d6;
  --im3-accent-hover: #075da8;
  --im3-accent-soft: rgba(10, 120, 214, 0.12);
  --im3-success: #027a48;
  --im3-success-soft: rgba(2, 122, 72, 0.1);
  --im3-warning: #b54708;
  --im3-warning-soft: rgba(181, 71, 8, 0.12);
  --im3-danger: #d92d20;
  --im3-danger-soft: rgba(217, 45, 32, 0.1);
  --im3-radius-xs: 4px;
  --im3-radius-sm: 6px;
  --im3-radius: 8px;
  --im3-radius-lg: 10px;
  --im3-radius-pill: 999px;
  --im3-space-1: 4px;
  --im3-space-2: 8px;
  --im3-space-3: 12px;
  --im3-space-4: 16px;
  --im3-space-5: 20px;
  --im3-space-6: 24px;
  --im3-space-8: 32px;
  --im3-space-10: 48px;
  --im3-space-12: 64px;
  --im3-font-sans: "ImagoDisplay", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --im3-text-xs: 0.75rem;
  --im3-text-sm: 0.875rem;
  --im3-text-body: 1rem;
  --im3-text-lead: 1.125rem;
  --im3-text-section: 1.5rem;
  --im3-text-page: 2rem;
  --im3-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --im3-shadow-2: 0 18px 44px -30px rgba(15, 23, 42, 0.42);
  --im3-focus-ring: 0 0 0 3px rgba(10, 120, 214, 0.24);
  --im3-fast: 120ms;
  --im3-base: 180ms;
  --im3-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --im3-topbar-height: 64px;
  --im3-sidebar-width: 280px;
  --im3-bottom-nav-height: 64px;
  --im3-z-toast: 1000;
  --im3-z-dialog: 1100;
}

@media (prefers-color-scheme: dark) {
  :root {
    --im3-canvas: #0b1020;
    --im3-surface-raised: #111827;
    --im3-surface: #121a2b;
    --im3-surface-subtle: #172033;
    --im3-ink: #f9fafb;
    --im3-muted: #94a3b8;
    --im3-line: rgba(255, 255, 255, 0.12);
    --im3-line-strong: rgba(255, 255, 255, 0.22);
    --im3-accent: #4ea1f0;
    --im3-accent-hover: #7bbcff;
    --im3-accent-soft: rgba(78, 161, 240, 0.16);
    --im3-success: #5bd3a6;
    --im3-success-soft: rgba(50, 213, 131, 0.14);
    --im3-warning: #f2bd5b;
    --im3-warning-soft: rgba(247, 144, 9, 0.16);
    --im3-danger: #ff8a82;
    --im3-danger-soft: rgba(240, 68, 56, 0.15);
    --im3-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
    --im3-shadow-2: 0 22px 54px -30px rgba(0, 0, 0, 0.64);
  }
}
}