/* ============================================================
 * variables.css —— 萌宠档案设计系统（硬约束，禁止硬编码颜色）
 * 色板基准：萌宠交互设计规范文档.md v1.0 + 范式的§5 + PRD §10.1
 * 所有页面/组件一律引用以下 CSS 变量。
 * ============================================================ */
:root {
  /* 天空蓝主色 */
  --sky-top: #4A90D9;
  --sky-mid: #87CEEB;
  --sky-bottom: #B8E0F0;
  /* 云白 */
  --cloud-white: rgba(255,255,255,0.92);
  --cloud-shadow: rgba(120,180,220,0.15);
  /* 水色系 */
  --water-deep: #1E6091;
  --water-mid: #3A8BC2;
  --water-light: #7EC8E3;
  --water-reflection: rgba(255,255,255,0.25);
  /* 暖强调色（实际 UI 用渐变 #FF7E3A / #FF6F2E 等衍生） */
  --accent-warm: #FF9A6C;
  --accent-orange: #FF8C42;
  /* 文字 */
  --text-dark: #103a5e;       /* 实际 UI 主文字 */
  --text-mid: #3d6a8c;
  --text-light: #5f87ab;      /* 实际 UI 辅助/占位 */
  /* 卡片/玻璃拟态 */
  --card-bg: rgba(255,255,255,0.78);
  --card-border: rgba(255,255,255,0.55);
  --glass-bg: rgba(255,255,255,0.35);
  --glass-border: rgba(255,255,255,0.4);
  /* 标签语义色 */
  --tag-breed: #5BA8D0;     /* 品种标签 */
  --tag-stage: #70BB9B;     /* 繁殖阶段标签 */
  --tag-male: #42A5F5;      /* 性别-雄 */
  --tag-female: #EC407A;    /* 性别-雌 */
  /* 状态色（三态，固定不可私自改） */
  --status-keeping: #4CAF50;     /* 在养 */
  --status-transferred: #9E9E9E; /* 已转 */
  --status-deceased: #78909C;    /* 安息（交互稿实际蓝灰） */
  /* 导航/按钮渐变 */
  --grad-blue: linear-gradient(135deg, #3E8BD8, #5FA6D8);
  --grad-blue-deep: linear-gradient(135deg, #3E8BD8, #3F7FC4);
  --grad-orange: linear-gradient(135deg, #FF8C5A, #FF6F2E);
  /* 危险/删除按钮（橙红，危险操作） */
  --grad-danger: linear-gradient(135deg, #FF7043, #E64A19);
  /* 竖条渐变（区块标题/字段标签左侧） */
  --grad-vbar: linear-gradient(180deg, #3E8BD8, #FF7E3A);
  /* 次按钮底（取消） */
  --btn-secondary-bg: rgba(200,225,245,0.4);
  /* FAB 阴影 */
  --fab-shadow: 0 5px 22px rgba(255,140,66,0.45);
  /* 卡片阴影 */
  --card-shadow: 0 6px 26px rgba(20,60,100,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.85);
  /* 强白 halo（可见性红线用） */
  --text-halo: 0 1px 5px rgba(255,255,255,0.75), 0 0 2px rgba(255,255,255,0.5);
  /* 鸟卡/配对卡/知识卡底色（提升至 0.82 保可读） */
  --card-bg-strong: rgba(255,255,255,0.82);
  /* 输入/控件玻璃底 */
  --input-bg: rgba(255,255,255,0.68);
  /* 知识内容折叠渐变底色 */
  --kb-fade-bottom: rgba(255,255,255,0.95);
  /* 层级 z-index 变量（对照交互规范 §4.2） */
  --z-bg: 0;
  --z-content: 10;
  --z-savebar: 50;
  --z-mascot: 55;
  --z-fab: 70;
  --z-nav: 90;
  --z-tabbar: 100;
  --z-mask: 200;
  --z-viewer: 210;
  /* 尺度 */
  --radius-card: 20px;
  --radius-input: 15px;
  --maxw-content: 960px;
}

/* ============================================================
 * 暗色系覆盖（[data-theme="dark"]）
 * 用户可在设置页切换亮色/暗色，偏好存 localStorage key: mc-theme
 * ============================================================ */
[data-theme="dark"] {
  /* 天空蓝主色 → 深蓝灰 */
  --sky-top: #2C3E50;
  --sky-mid: #34495E;
  --sky-bottom: #1E1E1E;
  /* 云白 → 暗灰 */
  --cloud-white: rgba(230,230,230,0.92);
  --cloud-shadow: rgba(0,0,0,0.3);
  /* 水色系 → 暗化 */
  --water-deep: #1A3A5C;
  --water-mid: #2A5A7C;
  --water-light: #4A7A9C;
  --water-reflection: rgba(255,255,255,0.08);
  /* 暖强调色保持 */
  --accent-warm: #FF9A6C;
  --accent-orange: #FF8C42;
  /* 文字 → 浅色 */
  --text-dark: #E0E0E0;
  --text-mid: #A0A0A0;
  --text-light: #707070;
  /* 卡片/玻璃拟态 → 深色半透明 */
  --card-bg: rgba(40,40,45,0.82);
  --card-border: rgba(60,60,65,0.6);
  --glass-bg: rgba(45,45,50,0.65);
  --glass-border: rgba(60,60,65,0.5);
  /* 标签语义色保持 */
  --tag-breed: #5BA8D0;
  --tag-stage: #70BB9B;
  --tag-male: #42A5F5;
  --tag-female: #EC407A;
  /* 状态色保持 */
  --status-keeping: #4CAF50;
  --status-transferred: #9E9E9E;
  --status-deceased: #78909C;
  /* 导航/按钮渐变保持 */
  --grad-blue: linear-gradient(135deg, #3E7BD8, #5F96D8);
  --grad-blue-deep: linear-gradient(135deg, #3E7BD8, #3F6FC4);
  --grad-orange: linear-gradient(135deg, #FF8C5A, #FF6F2E);
  --grad-danger: linear-gradient(135deg, #FF7043, #E64A19);
  --grad-vbar: linear-gradient(180deg, #3E7BD8, #FF7E3A);
  /* 次按钮底 */
  --btn-secondary-bg: rgba(60,60,70,0.5);
  /* FAB 阴影 */
  --fab-shadow: 0 5px 22px rgba(255,140,66,0.3);
  /* 卡片阴影 */
  --card-shadow: 0 6px 26px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  /* 文字 halo → 暗色不需要白边 */
  --text-halo: 0 1px 5px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.3);
  /* 鸟卡/配对卡/知识卡底色 */
  --card-bg-strong: rgba(40,40,45,0.85);
  /* 输入/控件玻璃底 */
  --input-bg: rgba(50,50,55,0.7);
  /* 知识内容折叠渐变底色 */
  --kb-fade-bottom: rgba(40,40,45,0.95);
}