:root {
  /* 语义色 */
  --primary-color: #007bff; /* 主要颜色 */
  --secondary-color: #6c757d; /* 次要颜色 */
  --success-color: #28a745; /* 成功颜色 */
  --warning-color: #ffc107; /* 警告颜色 */
  --danger-color: #dc3545; /* 危险颜色 */
  --info-color: #17a2b8; /* 信息颜色 */

  --light-color: #f8f9fa; /* 浅色颜色 */
  --dark-color: #343a40; /* 深色颜色 */

  --white-color: #ffffff; /* 白色颜色 */
  --black-color: #000000; /* 黑色颜色 */

  /* 基础间距单位 */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */
  --spacing-4xl: 6rem; /* 96px */
  --spacing-5xl: 8rem; /* 128px */

  /* 特殊间距 */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0_5: 0.125rem; /* 2px */
  --spacing-1_5: 0.375rem; /* 6px */
  --spacing-2_5: 0.625rem; /* 10px */
  --spacing-3_5: 0.875rem; /* 14px */

  /* 字体大小 */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */
  --text-7xl: 4.5rem; /* 72px */
  --text-8xl: 6rem; /* 96px */
  --text-9xl: 8rem; /* 128px */

  /* 行高 */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* 字重 */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* 字间距 */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* 边框宽度 */
  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;

  /* 圆角 */
  --radius-none: 0px;
  --radius-sm: 0.125rem; /* 2px */
  --radius-base: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* 模糊 */
  --blur-none: 0;
  --blur-sm: 4px;
  --blur: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* 亮度 */
  --brightness-0: 0;
  --brightness-50: 0.5;
  --brightness-75: 0.75;
  --brightness-90: 0.9;
  --brightness-95: 0.95;
  --brightness-100: 1;
  --brightness-105: 1.05;
  --brightness-110: 1.1;
  --brightness-125: 1.25;
  --brightness-150: 1.5;
  --brightness-200: 2;

  /* 对比度 */
  --contrast-0: 0;
  --contrast-50: 0.5;
  --contrast-75: 0.75;
  --contrast-100: 1;
  --contrast-125: 1.25;
  --contrast-150: 1.5;
  --contrast-200: 2;

  /* 灰度 */
  --grayscale-0: 0;
  --grayscale: 100%;

  /* 色调旋转 */
  --hue-rotate-0: 0deg;
  --hue-rotate-15: 15deg;
  --hue-rotate-30: 30deg;
  --hue-rotate-60: 60deg;
  --hue-rotate-90: 90deg;
  --hue-rotate-180: 180deg;

  /* 反转 */
  --invert-0: 0;
  --invert: 100%;

  /* 饱和度 */
  --saturate-0: 0;
  --saturate-50: 0.5;
  --saturate-100: 1;
  --saturate-150: 1.5;
  --saturate-200: 2;

  /* 棕褐色 */
  --sepia-0: 0;
  --sepia: 100%;

  /* 透明度 */
  --backdrop-blur-none: 0;
  --backdrop-blur-sm: 4px;
  --backdrop-blur: 8px;
  --backdrop-blur-md: 12px;
  --backdrop-blur-lg: 16px;
  --backdrop-blur-xl: 24px;
  --backdrop-blur-2xl: 40px;
  --backdrop-blur-3xl: 64px;

  /* 断点 */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* 扩展颜色变量 - RGB值用于透明度 */
  --primary-color-rgb: 0, 123, 255;
  --secondary-color-rgb: 108, 117, 125;
  --success-color-rgb: 40, 167, 69;
  --warning-color-rgb: 255, 193, 7;
  --danger-color-rgb: 220, 53, 69;
  --info-color-rgb: 23, 162, 184;
}

:root[data-theme='dark'] {
  --primary-color: #4c8dff;
  --secondary-color: #9aa0a6;
  --success-color: #5fd38d;
  --warning-color: #ffd166;
  --danger-color: #ff6b6b;
  --info-color: #52bfe2;

  --light-color: #202124;
  --dark-color: #e8eaed;

  --white-color: #121212;
  --black-color: #ffffff;

  /* 基础间距单位 */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */
  --spacing-4xl: 6rem; /* 96px */
  --spacing-5xl: 8rem; /* 128px */

  /* 特殊间距 */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0_5: 0.125rem; /* 2px */
  --spacing-1_5: 0.375rem; /* 6px */
  --spacing-2_5: 0.625rem; /* 10px */
  --spacing-3_5: 0.875rem; /* 14px */

  /* 字体大小 */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */
  --text-7xl: 4.5rem; /* 72px */
  --text-8xl: 6rem; /* 96px */
  --text-9xl: 8rem; /* 128px */

  /* 行高 */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* 字重 */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* 字间距 */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* 边框宽度 */
  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;

  /* 圆角 */
  --radius-none: 0px;
  --radius-sm: 0.125rem; /* 2px */
  --radius-base: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* 模糊 */
  --blur-none: 0;
  --blur-sm: 4px;
  --blur: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* 亮度 */
  --brightness-0: 0;
  --brightness-50: 0.5;
  --brightness-75: 0.75;
  --brightness-90: 0.9;
  --brightness-95: 0.95;
  --brightness-100: 1;
  --brightness-105: 1.05;
  --brightness-110: 1.1;
  --brightness-125: 1.25;
  --brightness-150: 1.5;
  --brightness-200: 2;

  /* 对比度 */
  --contrast-0: 0;
  --contrast-50: 0.5;
  --contrast-75: 0.75;
  --contrast-100: 1;
  --contrast-125: 1.25;
  --contrast-150: 1.5;
  --contrast-200: 2;

  /* 灰度 */
  --grayscale-0: 0;
  --grayscale: 100%;

  /* 色调旋转 */
  --hue-rotate-0: 0deg;
  --hue-rotate-15: 15deg;
  --hue-rotate-30: 30deg;
  --hue-rotate-60: 60deg;
  --hue-rotate-90: 90deg;
  --hue-rotate-180: 180deg;

  /* 反转 */
  --invert-0: 0;
  --invert: 100%;

  /* 饱和度 */
  --saturate-0: 0;
  --saturate-50: 0.5;
  --saturate-100: 1;
  --saturate-150: 1.5;
  --saturate-200: 2;

  /* 棕褐色 */
  --sepia-0: 0;
  --sepia: 100%;

  /* 透明度 */
  --backdrop-blur-none: 0;
  --backdrop-blur-sm: 4px;
  --backdrop-blur: 8px;
  --backdrop-blur-md: 12px;
  --backdrop-blur-lg: 16px;
  --backdrop-blur-xl: 24px;
  --backdrop-blur-2xl: 40px;
  --backdrop-blur-3xl: 64px;

  /* 断点 */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* 扩展颜色变量 - RGB值用于透明度 (暗色主题) */
  --primary-color-rgb: 76, 141, 255;
  --secondary-color-rgb: 154, 160, 166;
  --success-color-rgb: 95, 211, 141;
  --warning-color-rgb: 255, 209, 102;
  --danger-color-rgb: 255, 107, 107;
  --info-color-rgb: 82, 191, 226;
}