:root {
  --cls-color-primary: #1976D2;
  --cls-color-primary-light: #42A5F5;
  --cls-color-primary-dark: #1565C0;
  --cls-color-primary-bg: #E3F2FD;
  --cls-color-secondary: #6C757D;
  --cls-color-secondary-light: #8A939B;
  --cls-color-secondary-dark: #545B62;
  --cls-color-bg: #F5F5F5;
  --cls-color-bg-light: #FAFAFA;
  --cls-color-bg-white: #FFFFFF;
  --cls-color-bg-card: #FFFFFF;
  --cls-color-bg-sidebar: #2C3E50;
  --cls-color-text: #212121;
  --cls-color-text-light: #757575;
  --cls-color-text-disabled: #BDBDBD;
  --cls-color-text-white: #FFFFFF;
  --cls-color-border: #E0E0E0;
  --cls-color-border-light: #EEEEEE;
  --cls-color-divider: #EEEEEE;

  --cls-color-success: #2E7D32;
  --cls-color-success-light: #66BB6A;
  --cls-color-success-bg: #E8F5E9;
  --cls-color-warning: #F57F17;
  --cls-color-warning-light: #FFCA28;
  --cls-color-warning-bg: #FFF8E1;
  --cls-color-error: #C62828;
  --cls-color-error-light: #EF5350;
  --cls-color-error-bg: #FFEBEE;
  --cls-color-info: #1976D2;

  --cls-color-fixed: #FFB300;
  --cls-color-fixed-bg: #FFF8E1;
  --cls-color-female: #E91E63;
  --cls-color-gold: #FFD700;
  --cls-color-silver: #C0C0C0;
  --cls-color-bronze: #CD7F32;
  --cls-color-discipline-bg: #FFF3E0;
  --cls-color-study-bg: #E3F2FD;
  --cls-color-activity-bg: #E8F5E9;

  --cls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --cls-font-size-xxl: 32px;
  --cls-font-size-xl: 24px;
  --cls-font-size-lg: 20px;
  --cls-font-size-md: 16px;
  --cls-font-size-base: 14px;
  --cls-font-size-sm: 13px;
  --cls-font-size-xs: 12px;
  --cls-font-size-tiny: 10px;
  --cls-font-weight-normal: 400;
  --cls-font-weight-medium: 500;
  --cls-font-weight-bold: 600;
  --cls-line-height: 1.5;

  --cls-space-xxl: 48px;
  --cls-space-xl: 32px;
  --cls-space-lg: 24px;
  --cls-space-base: 16px;
  --cls-space-md: 12px;
  --cls-space-sm: 8px;
  --cls-space-xs: 4px;

  --cls-spacing-1: var(--cls-space-xs);
  --cls-spacing-2: var(--cls-space-sm);
  --cls-spacing-3: var(--cls-space-md);
  --cls-spacing-4: var(--cls-space-base);
  --cls-spacing-6: var(--cls-space-lg);
  --cls-spacing-8: var(--cls-space-xl);
  --cls-spacing-12: var(--cls-space-xxl);

  --cls-font-size-h1: var(--cls-font-size-xl);
  --cls-font-size-h2: var(--cls-font-size-lg);
  --cls-font-size-h3: 18px;
  --cls-font-size-h4: var(--cls-font-size-md);
  --cls-font-size-body: var(--cls-font-size-base);
  --cls-font-size-small: var(--cls-font-size-xs);

  --cls-radius-sm: 4px;
  --cls-radius-md: 8px;
  --cls-radius-lg: 12px;
  --cls-radius-btn: 6px;
  --cls-radius-full: 9999px;

  --cls-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cls-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --cls-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

  --cls-transition-fast: 0.15s ease;
  --cls-transition: 0.2s ease;
  --cls-transition-slow: 0.3s ease;

  --cls-sidebar-width: 240px;
  --cls-sidebar-collapsed-width: 64px;
  --cls-content-max-width: 1200px;
  --cls-header-height: 56px;

  --cls-safe-area-top: env(safe-area-inset-top, 0px);
  --cls-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --cls-safe-area-left: env(safe-area-inset-left, 0px);
  --cls-safe-area-right: env(safe-area-inset-right, 0px);

  --cls-bottom-nav-height: 56px;
}