:root {
    /* === 字体基准设置 === */
    font-size: 16px;

    /* === 字体尺寸系统 === */
    --text-3xs: 0.5rem;   /* 8px */
    --text-2xs: 0.625rem;   /* 10px */
    --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 */
  
    /* === 颜色系统 === */
    /* 基础主题色 */
    --theme-expense: #28a745;   /* 支出绿色 */
    --theme-income: #dc3545;    /* 收入红色 */
    --theme-transfer: #007bff;  /* 转账蓝色 */
    --theme-budget: #ffc107;  /* 预算黄色 */
    --theme-gray: #b0b0b0;      /* 灰色 */
    --theme-expense-hover: #1e7e34; /* 支出悬停深绿色 */
    --theme-income-hover: #bb2d3b;     /* 收入悬停深红色 */
    --theme-transfer-hover: #0069d9; /* 转户悬停深蓝色 */
    --theme-budget-hover: #d39e00;   /* 预算悬停深黄色 */
    --category-icon-bg: #e9ecef; /* 默认icon背景灰 */
    
    /* 衍生变量-浅色主题变量 */
    --theme-expense-light: #d4edda;   /* 支出浅绿色 */
    --theme-income-light: #f8d7da;    /* 收入浅红色 */
    --theme-transfer-light: #d1ecf1;  /* 转账浅蓝色 */
    
    /* RGBA格式的主题色变量 */
    --theme-expense-rgba-0-8: rgba(40, 167, 69, 0.8);  /* 支出绿色，透明度0.8 */
    --theme-expense-rgba-1-0: rgba(40, 167, 69, 1.0);  /* 支出绿色，透明度1.0 */
    --theme-income-rgba-0-8: rgba(220, 53, 69, 0.8);   /* 收入红色，透明度0.8 */
    --theme-income-rgba-1-0: rgba(220, 53, 69, 1.0);   /* 收入红色，透明度1.0 */
    --theme-transfer-rgba-0-8: rgba(0, 123, 255, 0.8); /* 转账蓝色，透明度0.8 */
    --theme-transfer-rgba-1-0: rgba(0, 123, 255, 1.0); /* 转账蓝色，透明度1.0 */
    --theme-transfer-rgba-0-1: rgba(0, 123, 255, 0.1); /* 转账蓝色，透明度0.1 */
    --theme-expense-rgba-0-1: rgba(40, 167, 69, 0.1);  /* 支出绿色，透明度0.1 */
    --theme-income-rgba-0-1: rgba(220, 53, 69, 0.1);   /* 收入红色，透明度0.1 */
}

/* 主题class */
.theme-expense {
  --theme-main: var(--theme-expense);
  --theme-main-light: var(--theme-expense-light);
}
.theme-income {
  --theme-main: var(--theme-income);
  --theme-main-light: var(--theme-income-light);
}
.theme-transfer {
  --theme-main: var(--theme-transfer);
  --theme-main-light: var(--theme-transfer-light);
}