:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --bg-page: #ffffff;
  --bg-sidebar: #0f172a;
  --bg-sidebar-hover: #1e293b;
  --bg-muted: #f8fafc;
  --bg-callout: #f1f5f9;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;
  --text-inverse-muted: #94a3b8;

  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --shadow: 0 4px 12px rgb(15 23 42 / 8%);

  --sidebar-width: 280px;
  --content-narrow: 720px;
  --content-wide: 960px;

  --level-blue: #2563eb;
  --level-red: #dc2626;
  --level-yellow: #ca8a04;
  --level-green: #16a34a;
  --level-purple: #9333ea;
  --level-orange: #ea580c;
  --level-violet: #7c3aed;

  --accent: var(--level-blue);
  --accent-soft: #dbeafe;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
}

[data-level='red'] {
  --accent: var(--level-red);
  --accent-soft: #fee2e2;
}

[data-level='yellow'] {
  --accent: var(--level-yellow);
  --accent-soft: #fef9c3;
}

[data-level='green'] {
  --accent: var(--level-green);
  --accent-soft: #dcfce7;
}