/* ============================================================================
   水族助手 · Design Tokens
   ---------------------------------------------------------------------------
   配色方案：白绿黑三色体系（主 UI 依据 pics/1–4 参考图取样）
     · 底 = 白        #FCFCFC 页面 / #FFFFFF 卡片
     · 字 = 黑        #242424 主文字
     · 按钮 / 状态 / 关键词 = 绿
         品牌绿家族（参考图取样）：#2C8C64 → #34A474 → #3CB47C
         大面板 = 绿色渐变 + 白色内容；按钮 = 绿底白字（胶囊形）
         浅绿 #E4FCF4 用于选中/柔和底色，灰面板 #F4F4F4 用于次级分组
     · 深色主题 = 同一套绿的低照度版本（黑底 / 白字 / 绿按钮）
   ========================================================================== */

:root {
  /* ---------- 白绿黑（默认主题） ---------- */
  --bg-primary: #FCFCFC;      /* 页面底色：白 */
  --bg-surface: #FFFFFF;      /* 卡片：白 */
  --bg-soft: #F4F4F4;         /* 次级面板 / 分组底：浅灰（参考图） */
  --bg-elevated: #F4F6F5;     /* 输入框 / 轨道 */
  --bg-hover: #EFF3F1;
  --bg-inset: #F7F9F8;        /* 图表底 */

  --text-primary: #242424;    /* 主文字：黑（参考图取样） */
  --text-secondary: #7C847F;
  --text-tertiary: #A0A6A2;
  --text-on-accent: #FFFFFF;  /* 绿底上的字：白 */

  /* 绿（参考图取样：品牌绿家族） */
  --brand: #3CB47C;
  --brand-dark: #2C8C64;
  --accent: #2A855E;          /* 绿色文字 / 关键词 / 图标（白底对比度 ≈4.6:1） */
  --accent-hover: #23704F;
  --accent-soft: #E4FCF4;     /* 浅绿（参考图选中态底色） */
  --accent-line: #9EDFC2;
  --btn: #24855A;
  --btn-2: #2E9C6E;
  --btn-grad: linear-gradient(135deg, #217A52 0%, #2E9C6E 100%);
  --hero-grad: linear-gradient(135deg, #2C8C64 0%, #34A474 55%, #3CB47C 100%);

  --success: #2A855E;
  --success-soft: #E4FCF4;
  --warning: #C67C1E;
  --warning-soft: rgba(198, 124, 30, .12);
  --danger: #C0392B;
  --danger-soft: rgba(192, 57, 43, .10);

  --border: #E7E9E8;
  --border-strong: #D5D9D7;

  --shadow-1: 0 1px 2px rgba(20, 30, 25, .05);
  --shadow-2: 0 14px 34px rgba(20, 30, 25, .14);
  --shadow-green: 0 10px 26px rgba(44, 140, 100, .28);
  --overlay: rgba(20, 30, 25, .38);
  --scroll-thumb: #CFD6D2;
  --grid-line: rgba(20, 30, 25, .08);
  --track: #E9ECEA;

  /* ---------- 功能语义色（通道 / 光色 / 场景标识，主题无关） ---------- */
  --ch-r: #E74C3C;
  --ch-g: #2ECC71;
  --ch-b: #3498DB;
  --ch-w: #8E9A94;          /* 白光通道在浅底上的可见灰 */
  --cct-warm: #F09A2E;
  --cct-mid: #FFE9C9;
  --cct-cool: #7FB2F0;

  /* ---------- 圆角（参考图：大圆角面板 + 胶囊按钮） ---------- */
  --r-card: 14px;
  --r-btn: 999px;
  --r-tile: 12px;
  --r-seg: 10px;
  --r-input: 12px;
  --r-chip: 999px;
  --r-sheet: 20px;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  /* ---------- 字体 ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 20px;
  --fs-h2: 16px;
  --fs-h3: 14px;
  --fs-body: 13.5px;
  --fs-sm: 12.5px;
  --fs-xs: 11.5px;
  --lh: 1.5;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .14s;
  --dur: .22s;

  /* ---------- 组件尺寸 ---------- */
  --nav-w: 236px;
  --topbar-h: 58px;
  --tabbar-h: 62px;
  --slider-h: 6px;
  --thumb: 18px;

  /* ---------- 动态（由 JS 按灯光状态注入） ---------- */
  --light-color: #4A9EFF;
  --light-color-2: #4A9EFF;
  --light-glow: rgba(74, 158, 255, .55);
  --light-level: 1;
}

/* ---------- 深色主题：黑底 / 白字 / 绿按钮 ---------- */
[data-theme="dark"] {
  --bg-primary: #0F1412;
  --bg-surface: #171D1A;
  --bg-soft: #1F2723;
  --bg-elevated: #1F2723;
  --bg-hover: #242D28;
  --bg-inset: #131917;

  --text-primary: #F2F5F3;
  --text-secondary: #9DAAA2;
  --text-tertiary: #74827A;
  --text-on-accent: #FFFFFF;

  --brand: #3CB47C;
  --brand-dark: #2C8C64;
  --accent: #4ADE80;
  --accent-hover: #6BE397;
  --accent-soft: rgba(74, 222, 128, .14);
  --accent-line: rgba(74, 222, 128, .40);
  --btn: #1E7A4A;
  --btn-2: #28A165;
  --btn-grad: linear-gradient(135deg, #1E7A4A 0%, #28A165 100%);
  --hero-grad: linear-gradient(135deg, #1B6B44 0%, #268A5C 60%, #2E9C6E 100%);

  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, .14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, .14);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, .14);

  --border: #2A322E;
  --border-strong: #3A453F;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .55);
  --shadow-green: 0 10px 26px rgba(0, 0, 0, .45);
  --overlay: rgba(0, 0, 0, .58);
  --scroll-thumb: #3A453F;
  --grid-line: rgba(255, 255, 255, .07);
  --track: #2A322E;

  --ch-w: #E8E8E8;
}