:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-on-primary: #ffffff;
  --color-background: #f5f7fb;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info-soft: #eff6ff;
  --color-success-soft: #f0fdf4;
  --color-warning-soft: #fffbeb;
  --color-danger-soft: #fef2f2;
  --color-backdrop: rgb(15 23 42 / 40%);
  --shadow-dialog: 0 16px 48px rgb(15 23 42 / 16%);
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption: 12px;
  --font-size-section: 18px;
  --font-size-title: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --radius-control: 8px;
  --radius-card: 8px;
  --sidebar-width: 240px;
  --header-height: 72px;
  --control-height: 40px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: var(--font-size-body)/1.5 var(--font-family);
}

h1, h2, h3, p, ul, ol, dl, dd {
  margin: 0;
}

button, input, select, textarea {
  font: inherit;
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

img, svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

button:disabled {
  cursor: not-allowed;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}