:root {
    /* Fonts */
    --font-family-base: "Inter", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;

    /* Colors */
    --color-app-background: #f6f7fb;
    --color-surface: #ffffff;
    --color-sidebar: #24283b;
    --color-sidebar-secondary: #30354e;
    --color-sidebar-soft: #393e5a;
    --color-text-primary: #15182b;
    --color-text-secondary: #697087;
    --color-text-muted: #969caf;
    --color-text-inverse: #ffffff;
    --color-primary: #6756c8;
    --color-primary-hover: #5949b8;
    --color-primary-soft: #eeeafe;
    --color-success: #27a844;
    --color-warning: #d99419;
    --color-error: #e34850;
    --color-info: #4385d7;
    --color-border: #e2e5ee;
    --color-border-strong: #cfd4e1;
    --color-focus: rgba(103, 86, 200, 0.28);
    --color-overlay: rgba(15, 18, 32, 0.56);

    /* Sizing */
    --sidebar-width-full: 270px;
    --sidebar-width-compact: 84px;
    --header-height: 64px;
    --content-max-width: 1280px;
    --drawer-width: min(320px, 86vw);
    --touch-target: 44px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-card: 0 8px 24px rgba(25, 30, 54, 0.06);
    --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-drawer: 24px 0 48px rgba(15, 18, 32, 0.22);

    /* Transitions */
    --transition-fast: 160ms ease;
    --transition-base: 220ms ease;
}