/* ============================================================
   design-tokens.css — 设计令牌（全局唯一修改入口）
   
   ⚠️ 维护说明：
   - 所有颜色、字体、间距、圆角、阴影均在此文件定义
   - 修改主题只需改 :root 内的变量，无需动其他文件
   - 每个变量名语义化，见注释
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* ── 1. 主色系 ─────────────────────────────────────── */
:root {
  /* 品牌主色（可爱珊瑚橙） */
  --color-primary:        #FF6B6B;
  --color-primary-light:  #FF8E8E;
  --color-primary-lighter:#FFD4D4;
  --color-primary-dark:   #E85555;
  --color-primary-bg:     #FFF5F5;

  /* 辅色（活力薄荷绿） */
  --color-secondary:      #4ECDC4;
  --color-secondary-light:#7EDDD7;
  --color-secondary-lighter:#C8F2EF;
  --color-secondary-dark: #36B8AF;

  /* 强调色（阳光黄） */
  --color-accent:         #FFE66D;
  --color-accent-dark:    #F0D430;
  --color-accent-bg:      #FFFDE7;

  /* 紫色点缀 */
  --color-purple:         #A78BFA;
  --color-purple-light:   #C4B5FD;
  --color-purple-bg:      #F5F3FF;

  /* 蓝色点缀 */
  --color-blue:           #60A5FA;
  --color-blue-light:     #93C5FD;
  --color-blue-bg:        #EFF6FF;
}

/* ── 2. 中性色 ─────────────────────────────────────── */
:root {
  --color-white:          #FFFFFF;
  --color-bg:             #FFF8F6;       /* 全局背景（暖白） */
  --color-bg-card:        #FFFFFF;       /* 卡片背景 */
  --color-bg-sidebar:     #2D2D3A;       /* 侧边栏背景 */
  --color-bg-sidebar-active: #3D3D50;   /* 侧边栏激活项背景 */

  --color-text-primary:   #2D2D3A;       /* 主文字 */
  --color-text-secondary: #6B7280;       /* 次要文字 */
  --color-text-muted:     #9CA3AF;       /* 弱化文字 */
  --color-text-inverse:   #FFFFFF;       /* 反色文字 */

  --color-border:         #F0E8E8;       /* 边框（淡粉） */
  --color-border-strong:  #D1C4C4;       /* 强边框 */
  --color-divider:        #F5EDED;       /* 分割线 */
}

/* ── 3. 语义色（状态） ─────────────────────────────── */
:root {
  --color-success:        #22c55e;
  --color-success-bg:     #F0FDF4;
  --color-warning:        #f59e0b;
  --color-warning-bg:     #FFFBEB;
  --color-danger:         #ef4444;
  --color-danger-bg:      #FEF2F2;
  --color-info:           #3b82f6;
  --color-info-bg:        #EFF6FF;
}

/* ── 4. 考勤状态色（与 seed.sql 保持一致） ─────────── */
:root {
  --att-present:  #22c55e;
  --att-late:     #f59e0b;
  --att-early:    #f97316;
  --att-absent:   #ef4444;
  --att-sick:     #8b5cf6;
  --att-personal: #3b82f6;
  --att-official: #06b6d4;
}

/* ── 5. 字体系统 ────────────────────────────────────── */
:root {
  /* 字体家族 */
  --font-display: 'Ma Shan Zheng', cursive;        /* 标题/品牌字 */
  --font-body:    'Noto Sans SC', sans-serif;       /* 正文字 */
  --font-mono:    'Courier New', monospace;         /* 代码/数字 */

  /* 字号阶梯（rem） */
  --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 */

  /* 字重 */
  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;

  /* 行高 */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;
}

/* ── 6. 间距系统（4px基准） ────────────────────────── */
:root {
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
}

/* ── 7. 圆角系统 ────────────────────────────────────── */
:root {
  --radius-sm:   0.375rem;   /* 6px  - 小元素 */
  --radius-md:   0.75rem;    /* 12px - 按钮、输入框 */
  --radius-lg:   1rem;       /* 16px - 卡片 */
  --radius-xl:   1.5rem;     /* 24px - 大卡片 */
  --radius-2xl:  2rem;       /* 32px - 弹窗 */
  --radius-full: 9999px;     /* 全圆 - 标签、头像 */
}

/* ── 8. 阴影系统 ────────────────────────────────────── */
:root {
  --shadow-sm:   0 1px 3px rgba(255,107,107,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(255,107,107,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 24px rgba(255,107,107,0.15), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-xl:   0 16px 40px rgba(255,107,107,0.18), 0 8px 16px rgba(0,0,0,0.1);
  --shadow-card: 0 2px 8px rgba(255,107,107,0.1), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-inner:inset 0 2px 6px rgba(0,0,0,0.06);
}

/* ── 9. 过渡动画 ────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 10. 布局尺寸 ───────────────────────────────────── */
:root {
  --sidebar-width:        240px;
  --sidebar-width-collapsed: 64px;
  --header-height:        64px;
  --content-max-width:    1400px;
  --card-padding:         var(--space-6);
  --section-gap:          var(--space-6);
}

/* ── 11. Z层级 ──────────────────────────────────────── */
:root {
  --z-sidebar:   100;
  --z-header:    200;
  --z-dropdown:  300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
}