:root {
    --color-primary: #3d5c7a;
    --color-primary-hover: #324e69;
    --color-primary-light: #eef2f5;
    --color-primary-50: #eef2f5;
    --color-primary-100: #dfe6eb;
    --color-primary-200: #c2cfd8;
    --color-primary-300: #95abc0;
    --color-primary-500: #3d5c7a;
    --color-primary-600: #324e69;
    --color-primary-700: #2b425a;

    --color-accent: #3f7490;
    --color-accent-hover: #35637c;
    --color-accent-light: #eaf2f6;
    --color-accent-500: #3f7490;
    --color-accent-600: #35637c;

    --color-success: #4c7a5f;
    --color-success-light: #eef4f0;
    --color-warning: #a8752a;
    --color-warning-light: #faf3e6;
    --color-error: #c0392b;
    --color-error-light: #f9efee;
    --color-info: #3f6d9c;
    --color-info-light: #eef3f8;

    --gradient-primary: linear-gradient(135deg, #2b425a 0%, #3d5c7a 55%, #5a7896 100%);
    --gradient-primary-hover: linear-gradient(135deg, #22364a 0%, #324e69 55%, #4a6986 100%);
    --gradient-subtle: linear-gradient(145deg, #f5f3ee 0%, #eae7df 100%);
    --gradient-card: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    --gradient-sidebar: linear-gradient(180deg, #f7f5f0 0%, #efede6 100%);

    --glow-primary: 0 0 20px rgba(61, 92, 122, 0.18);
    --glow-accent: 0 0 20px rgba(198, 70, 46, 0.16);
    --glow-success: 0 0 20px rgba(76, 122, 95, 0.16);

    --text-primary: #232a31;
    --text-secondary: #47525c;
    --text-tertiary: #7a8697;
    --text-inverse: #ffffff;
    --text-link: #3d5c7a;
    --text-link-hover: #2b425a;

    --bg-page: #eceef0;
    --bg-card: #ffffff;
    --bg-card-hover: #fbfaf7;
    --bg-sidebar: transparent;
    --bg-sidebar-hover: #e8e6df;
    --bg-sidebar-active: rgba(61, 92, 122, 0.10);
    --bg-input: #fdfdfb;
    --bg-input-focus: #ffffff;
    --bg-overlay: rgba(35, 42, 49, 0.5);
    --bg-skeleton: #e0e3e6;

    --border-light: #ece9e1;
    --border-default: #dcd8cd;
    --border-strong: #bfb9ab;
    --border-focus: #3d5c7a;
    --border-error: #c0392b;

    --shadow-xs: 0 1px 2px rgba(35, 42, 49, 0.05);
    --shadow-sm: 0 1px 3px rgba(35, 42, 49, 0.07), 0 1px 2px rgba(35, 42, 49, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(35, 42, 49, 0.08), 0 2px 4px -2px rgba(35, 42, 49, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(35, 42, 49, 0.09), 0 4px 6px -4px rgba(35, 42, 49, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(35, 42, 49, 0.10), 0 8px 10px -6px rgba(35, 42, 49, 0.05);
    --shadow-card: 0 1px 3px rgba(35, 42, 49, 0.05), 0 1px 2px rgba(35, 42, 49, 0.03);
    --shadow-card-hover: 0 10px 15px -3px rgba(35, 42, 49, 0.10), 0 4px 6px -4px rgba(35, 42, 49, 0.05);
    --shadow-popup: 0 20px 25px -5px rgba(35, 42, 49, 0.14), 0 8px 10px -6px rgba(35, 42, 49, 0.08);

    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-full: 9999px;

    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;

    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Songti SC', 'STSong', 'Noto Serif SC', 'SimSun', Georgia, serif;
    --font-kai: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 28px;
    --text-5xl: 36px;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    --sidebar-width: 240px;
    --sidebar-collapsed-width: 72px;
    --header-height: 56px;
}