:root {
  --color-bg: #f8fafc;
  --color-bg-alt: #eef2f6;
  --color-surface: #ffffff;
  --color-primary: #1351b4;
  --color-primary-dark: #0c326f;
  --color-accent-green: #168821;
  --color-accent-yellow: #ffcd07;
  --color-accent-teal: #0c9191;
  --color-accent-violet: #6f42c1;
  --color-text: #1a1a1a;
  --color-text-muted: #555555;
  --color-border: #d1d9e0;
  --color-callout: #e8f0fe;
  --color-future: #6f42c1;
  --color-future-bg: #f3eefb;

  --font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

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

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

  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 16px rgba(19, 81, 180, 0.08);

  --header-height: 64px;
  --sidenav-width: 240px;

  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  --transition: 0.2s ease;
}