/* ============================================================
   明德书院义工工时统计平台 —— 设计令牌（唯一来源）
   黛青 / 朱砂 / 装饰金 / 舞台黑 / 宣纸
   两端（管理端 light、移动端 dark）均引用本文件，禁止在组件内裸写色值。
   ============================================================ */
:root {
  /* 品牌色 */
  --color-stage: #15130E;   /* 舞台黑：深色背景基底 */
  --color-ink:   #183B3A;   /* 黛青：主品牌 / 主文字 */
  --color-accent:#B33A2B;   /* 朱砂：主操作 / 强调 */
  --color-gold:  #C9A24B;   /* 装饰金：点缀 / 数字高亮 */
  --color-paper: #F3EEE4;   /* 宣纸：浅色背景 */

  /* 中性色 */
  --color-ink-2: #2C4A48;
  --color-ink-soft: #5A6B69;
  --color-muted: #8A8275;
  --color-line:  #E3D9C6;
  --color-line-strong: #D6C8AE;

  /* 语义色 */
  --color-success: #3F7D5A;
  --color-warning: #C9821F;
  --color-danger:  #B33A2B;
  --color-info:    #2F6F8F;

  /* 深底（黛青/舞台黑）上的前景与分隔，供侧栏、深色端徽标等使用 */
  --on-action:      #FFFFFF;
  --on-brand:       #F3EEE4;
  --on-brand-soft:  #D8CDB6;
  --on-brand-muted: #C9BEA8;
  --veil-light:  rgba(255, 255, 255, 0.08);
  --line-invert: rgba(255, 255, 255, 0.12);
  --veil-toast:  rgba(21, 19, 14, 0.92);
  --veil-dark:   rgba(0, 0, 0, 0.55);

  /* 徽标（深色端用弱化前景，浅色端用基础语义色） */
  --badge-success-bg: rgba(63, 125, 90, 0.16);
  --badge-warning-bg: rgba(201, 130, 31, 0.18);
  --badge-danger-bg:  rgba(179, 58, 43, 0.16);
  --badge-info-bg:    rgba(47, 111, 143, 0.16);
  --badge-muted-bg:   rgba(138, 130, 117, 0.18);
  --success-soft: #6FCF97;
  --warning-soft: #E0A23A;
  --danger-soft:  #E08A7A;
  --info-soft:    #6FB3D6;

  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  /* 字号 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* 阴影 */
  --shadow-card: 0 6px 20px rgba(21, 19, 14, 0.08);
  --shadow-pop:  0 10px 30px rgba(21, 19, 14, 0.18);
}

/* 浅色主题（管理端） */
.theme-light {
  --bg: var(--color-paper);
  --bg-elevated: #FFFFFF;
  --bg-sunken: #EDE6D6;
  --text: var(--color-ink);
  --text-soft: var(--color-ink-soft);
  --text-muted: var(--color-muted);
  --line: var(--color-line);
  --brand: var(--color-ink);
  --brand-weak: rgba(24, 59, 58, 0.08);
  --action: var(--color-accent);
  --action-weak: rgba(179, 58, 43, 0.10);
}

/* 深色主题（移动端） */
.theme-dark {
  --bg: var(--color-stage);
  --bg-elevated: #1F1C15;
  --bg-sunken: #100E0A;
  --text: #F3EEE4;
  --text-soft: #D8CDB6;
  --text-muted: #9C9486;
  --line: #2E2A20;
  --brand: var(--color-gold);
  --brand-weak: rgba(201, 162, 75, 0.14);
  --action: var(--color-accent);
  --action-weak: rgba(179, 58, 43, 0.20);
}