:root {
  /* ---------- Brand 主色：金黄色渐变（默认主题） ---------- */
  --brand-50:  #F0FDF4;
  --brand-100: #DCFCE7;
  --brand-200: #BBF7D0;
  --brand-300: #86EFAC;
  --brand-400: #4ADE80;
  --brand-500: #16A34A;   /* 品牌核心色 */
  --brand-600: #15803D;
  --brand-700: #0D5A2E;
  --brand-800: #063D1F;
  --brand-900: #032512;

  --brand-gradient:        linear-gradient(135deg, #00ff6e 0%, #10d257 50%, #11ffb0 100%);
  --brand-gradient-soft:   linear-gradient(to bottom, #15803D 0%, #0D5A2E 100%);
  --brand-gradient-intense:linear-gradient(135deg, #16A34A 0%, #4ADE80 20%, #15803D 50%, #032512 100%);
  --brand-gradient-radial: radial-gradient(circle at center, #16A34A 0%, #063D1F 70%, #032512 100%);
  --brand-alpha-soft:      rgba(22, 163, 74, 0.4);
  --brand-alpha-medium:    rgba(21, 128, 61, 0.64);
  --brand-alpha-strong:    rgba(13, 90, 46, 0.88);
  --brand-alpha-border:    rgba(22, 163, 74, 1);

  /* ---------- Money 金钱专用色：全局常量，不随主题切换 ---------- */
  --money-gold-light:    #FFE082;   /* 高光 */
  --money-gold:          #FFC233;   /* 核心金 */
  --money-gold-deep:     #FF9F1A;   /* 深金 */
  --money-gold-shadow:   #C47500;   /* 阴影/描边 */
  --money-gradient:      linear-gradient(135deg, #FFE082 0%, #FFC233 45%, #FF9F1A 100%);
  --money-gradient-rich: linear-gradient(180deg, #FFE98A 0%, #FFC233 45%, #E68900 100%); /* 更有立体感 */
  --money-text-shadow:   0 1px 0 rgba(0,0,0,0.15), 0 0 12px rgba(255,194,51,0.35);
  --money-on-brand:      #3D2800;   /* 金色按钮上的文字：黄棕色深色，不是纯黑 */

  /* ---------- Neutral 中性色：深色底专用 ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F7FA;
  --neutral-100: #ECECF2;
  --neutral-200: #D4D4E0;
  --neutral-300: #A8A8B8;
  --neutral-400: #7A7A8C;
  --neutral-500: #545466;
  --neutral-600: #3A3A4A;
  --neutral-700: #252532;
  --neutral-800: #181824;
  --neutral-900: #0F0F18;
  --neutral-950: #08080F;

  /* ---------- Semantic 功能色 ---------- */
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --danger-400:  #F87171;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;
  --info-400:    #60A5FA;
  --info-500:    #3B82F6;
  --info-600:    #2563EB;

  /* ============================================================
     SEMANTIC TOKENS — 组件只用这层，不直接用原色
     换主题时只需替换上面的 brand-*，下面这层保持不动
     ============================================================ */

  /* ---------- Surface 背景层 ---------- */
  --surface-base:       #060d0b;              /* 页面最底层 */
  --surface-raised:     #0d1714;              /* 卡片/模块 */
  --surface-overlay:    #13211d;              /* 浮层/弹窗 */
  --surface-sunken:     #050509;              /* 输入框等凹陷 */
  --surface-brand:      var(--brand-gradient);
  --surface-brand-soft: var(--brand-alpha-soft);

  /* ---------- Text 文字色 ---------- */
  --text-primary:    var(--neutral-0);         /* 主要文字 */
  --text-secondary:  rgba(255,255,255,0.72);   /* 次要文字 */
  --text-tertiary:   rgba(255,255,255,0.48);   /* 辅助文字 */
  --text-disabled:   rgba(255,255,255,0.28);   /* 禁用 */
  --text-brand:      var(--brand-500);         /* 强调/链接 */
  --text-money:      var(--money-gold);        /* 金额数字专用（所有主题下都是金色）*/
  --text-on-brand:   var(--money-on-brand);    /* 金色按钮上的文字 · 黄棕色深色 */
  --text-inverse:    var(--neutral-900);       /* 反色 */

  /* ---------- Icon 图标色 ---------- */
  --icon-primary:   rgba(255,255,255,0.88);
  --icon-secondary: rgba(255,255,255,0.56);
  --icon-tertiary:  rgba(255,255,255,0.36);
  --icon-brand:     var(--brand-500);
  --icon-success:   var(--success-500);
  --icon-danger:    var(--danger-500);
  --icon-disabled:  rgba(255,255,255,0.24);

  /* ---------- State 状态色（交互反馈） ---------- */
  --state-hover:       rgba(255,255,255,0.06);
  --state-pressed:     rgba(255,255,255,0.10);
  --state-selected:    rgba(255,179,0,0.12);
  --state-focus-ring:  rgba(255,179,0,0.55);
  --state-brand-hover:   linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 45%, var(--brand-600) 100%);
  --state-brand-pressed: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 45%, var(--brand-700) 100%);

  /* ---------- Overlay 蒙层（模态/遮罩） ---------- */
  --overlay-light:   rgba(0,0,0,0.24);
  --overlay-medium:  rgba(0,0,0,0.56);
  --overlay-heavy:   rgba(0,0,0,0.80);
  --overlay-blur:    rgba(15,15,24,0.72);    /* 配合 backdrop-filter */
  --overlay-brand:   rgba(255,143,0,0.18);

  /* ---------- Border 描边 ---------- */
  --border-subtle:   rgba(255,255,255,0.06);
  --border-default:  rgba(255,255,255,0.12);
  --border-strong:   rgba(255,255,255,0.24);
  --border-brand:    var(--brand-500);
  --border-focus:    var(--brand-400);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --brand-alpha-soft:      color-mix(in srgb, var(--brand-500) 40%, transparent);
    --brand-alpha-medium:    color-mix(in srgb, var(--brand-600) 64%, transparent);
    --brand-alpha-strong:    color-mix(in srgb, var(--brand-700) 88%, transparent);
    --brand-alpha-border:    color-mix(in srgb, var(--brand-500) 100%, transparent);

    --surface-base:          color-mix(in srgb, var(--brand-900) 28%, var(--neutral-950));
    --surface-raised:        color-mix(in srgb, var(--brand-800) 36%, var(--neutral-900));
    --surface-overlay:       color-mix(in srgb, var(--brand-700) 44%, var(--neutral-800));
  }
}