:root {
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.5rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --line-height-base: 1.5;

    /* Palette — sampled from the design mockup */
    --color-canvas: #f0f0f0;
    --color-surface: #ffffff;
    --color-border: #e2e2e2;
    --color-text: #4b4b4b;
    --color-text-muted: #9d9d9d;
    --color-text-inverse: #ffffff;
    --color-accent: #63c0eb;
    --color-accent-soft: rgba(99, 192, 235, 0.16);
    --color-accent-strong: #387da2;
    --color-avatar-surface: #c8e0fc;
    --color-avatar-text: #1a439e;
    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #b91c1c;
    --color-stale-surface: #fdf2f1;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-pill: 999px;

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 72px;
    --transition-sidebar: 200ms ease;
}