:root {
  --app-font-family-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --app-font-size-100: 0.75rem;
  --app-font-size-200: 0.875rem;
  --app-font-size-300: 1rem;
  --app-font-size-400: 1.125rem;
  --app-font-size-500: 1.25rem;
  --app-font-size-600: 1.5rem;
  --app-font-size-700: 1.875rem;

  --app-line-height-tight: 1.3;
  --app-line-height-base: 1.55;

  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 0.75rem;
  --app-space-4: 1rem;
  --app-space-5: 1.25rem;
  --app-space-6: 1.5rem;
  --app-space-7: 1.75rem;
  --app-space-8: 2rem;
  --app-space-9: 2.25rem;
  --app-space-10: 2.5rem;

  --app-radius-sm: 0.375rem;
  --app-radius-md: 0.625rem;
  --app-radius-lg: 0.875rem;
  --app-radius-xl: 1rem;
  --app-radius-pill: 9999px;

  --app-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --app-shadow-2: 0 8px 20px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
  --app-shadow-3: 0 16px 36px rgba(15, 23, 42, 0.1), 0 6px 16px rgba(15, 23, 42, 0.06);

  --app-surface-canvas: #f7f9fc;
  --app-surface-sidebar: #0f172a;
  --app-surface-topbar: #ffffff;
  --app-surface-card: #fcfdff;
  --app-surface-muted: #f5f7fb;
  --app-border-subtle: #e7edf5;
  --app-border-strong: #cbd5e1;

  --app-text-primary: #0f172a;
  --app-text-secondary: #334155;
  --app-text-muted: #64748b;
  --app-text-on-dark: #e2e8f0;

  --app-brand-500: #2563eb;
  --app-brand-600: #1d4ed8;
  --app-brand-100: #dbeafe;

  --app-success-500: #15803d;
  --app-success-100: #dcfce7;
  --app-warning-500: #b45309;
  --app-warning-100: #fef3c7;
  --app-danger-500: #b91c1c;
  --app-danger-100: #fee2e2;
  --app-info-500: #0369a1;
  --app-info-100: #e0f2fe;
  --app-neutral-500: #475569;
  --app-neutral-100: #f1f5f9;

  --app-table-hover: #eef4ff;
  --app-focus-ring: 0 0 0 0.2rem rgba(37, 99, 235, 0.3);

  --app-sidebar-width: 280px;
  --app-topbar-height: 72px;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--app-font-family-sans);
  font-size: var(--app-font-size-300);
  line-height: var(--app-line-height-base);
  background: var(--app-surface-canvas);
  color: var(--app-text-primary);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
}