/* ==========================================================================
   景邦财税 JINGBANG TAX & FINANCE — Design Tokens
   品牌视觉识别系统 V1.0 · 开发交付用
   蓝金主调 · 简约高级
   --------------------------------------------------------------------------
   使用方式：将本文件作为全局样式表在应用最外层引入，所有组件只使用变量，
   不得硬编码色值，以保证品牌一致性与后续换肤能力。
   ========================================================================== */

:root {
  /* ---------- 1. 品牌主色：景邦蓝 Navy ---------- */
  --jb-navy-950: #04122A;   /* 极深蓝 · 大面积深色底 */
  --jb-navy-900: #061B3C;   /* 深蓝 · 主背景 / 文字 */
  --jb-navy-800: #0A2B5C;   /* 景邦蓝 · 品牌标准色 ★ */
  --jb-navy-700: #10386F;   /* 亮蓝 · 渐变高光端 */
  --jb-navy-600: #1B4C8F;   /* 商务蓝 · 次级按钮 */
  --jb-navy-500: #2A66B8;   /* 交互蓝 · 链接 / 悬停 */
  --jb-navy-400: #5B8ACB;   /* 浅蓝 · 图表辅助 */
  --jb-navy-300: #8FB0DC;
  --jb-navy-200: #BACDEB;
  --jb-navy-100: #E7EEFA;   /* 浅蓝底 · 标签 / 卡片 */
  --jb-navy-50:  #F4F7FD;   /* 极浅蓝底 · 区块背景 */

  /* ---------- 2. 品牌辅色：景邦金 Gold ---------- */
  --jb-gold-800: #7E6020;
  --jb-gold-700: #9E7C2E;   /* 深金 · 浅底上的金色文字（AA 达标）*/
  --jb-gold-600: #B08536;   /* 标准金 · 印刷 / 烫金 */
  --jb-gold-500: #C9A24B;   /* 景邦金 · 品牌标准色 ★ */
  --jb-gold-400: #D9B967;   /* 亮金 · 深底上的主金色 */
  --jb-gold-300: #E8D197;
  --jb-gold-200: #F1E3BB;
  --jb-gold-100: #F8F0DC;   /* 香槟底 · 高亮区块 */

  /* ---------- 3. 中性色 Neutral ---------- */
  --jb-ink-900: #161E2B;    /* 标题正文 */
  --jb-ink-800: #1C2433;
  --jb-ink-700: #3D4759;
  --jb-ink-600: #525E72;
  --jb-ink-500: #6B7686;    /* 次级正文（白底 4.65:1 AA）*/
  --jb-ink-400: #949CAB;    /* 占位符 / 禁用 */
  --jb-ink-300: #C3C9D4;    /* 描边 */
  --jb-ink-200: #E0E4EB;    /* 分割线 */
  --jb-ink-100: #F0F2F6;    /* 面板底 */
  --jb-paper:   #FFFFFF;
  --jb-canvas:  #EEF1F6;    /* 页面底 */

  /* ---------- 4. 功能语义色 Semantic ---------- */
  /* 文字色已按 WCAG AA（≥4.5:1，白底）实测校准，可直接用于正文；
     后缀 -fill 的亮色版本对比度不足，仅可用于填充、圆点、进度条等图形元素。 */
  --jb-success:      #12785A;  /* 已申报 / 已完成      白底 5.44:1 ✓ AA */
  --jb-success-fill: #1FA97A;  /* 仅图形填充           白底 2.99:1 */
  --jb-warning:      #96660A;  /* 待办 / 临近申报期     白底 5.00:1 ✓ AA */
  --jb-warning-fill: #E2A03F;  /* 仅图形填充           白底 2.25:1 */
  --jb-danger:       #C0392B;  /* 逾期 / 风险预警       白底 5.44:1 ✓ AA */
  --jb-danger-fill:  #D8483F;  /* 仅图形填充 */
  --jb-info:         #2A66B8;  /* 提示                 白底 5.69:1 ✓ AA */
  /* 浅底上的金色文字必须使用深金，禁止使用 #C9A24B 作为文字色（白底仅 2.35:1） */
  --jb-gold-text:    #7E6020;  /* 白底 5.86:1 ✓ AA */
  --jb-gold-text-lg: #9E7C2E;  /* 白底 3.91:1，仅限 ≥18px 粗体 */

  /* ---------- 5. 渐变 Gradient ---------- */
  --jb-grad-navy:  linear-gradient(135deg, #12386F 0%, #061B3C 100%);
  --jb-grad-gold:  linear-gradient(135deg, #F2E0AE 0%, #D9B967 38%, #BC9243 72%, #9A7828 100%);
  --jb-grad-gold-soft: linear-gradient(135deg, #E8D197 0%, #C9A24B 100%);
  --jb-grad-hero:  linear-gradient(160deg, #0A2B5C 0%, #061B3C 62%, #04122A 100%);

  /* ---------- 6. 字体 Typography ---------- */
  --jb-font-sans: "Noto Sans SC", "Source Han Sans SC", "HarmonyOS Sans SC",
                  "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --jb-font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --jb-font-num: "Inter", "Helvetica Neue", Arial, sans-serif;
  --jb-font-mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  --jb-fs-display: 48px;  /* 品牌标题 */
  --jb-fs-h1: 32px;
  --jb-fs-h2: 24px;
  --jb-fs-h3: 20px;
  --jb-fs-lg: 18px;
  --jb-fs-body: 16px;     /* 正文基准 */
  --jb-fs-sm: 14px;
  --jb-fs-xs: 12px;

  --jb-lh-tight: 1.25;
  --jb-lh-title: 1.4;
  --jb-lh-body: 1.75;     /* 中文正文行高 */

  --jb-ls-cn-title: .02em;   /* 中文标题字间距 */
  --jb-ls-en-title: -.01em;
  --jb-ls-caps: .2em;        /* 英文全大写标签 */

  /* ---------- 7. 间距 Spacing（8pt 栅格）---------- */
  --jb-sp-1: 4px;
  --jb-sp-2: 8px;
  --jb-sp-3: 12px;
  --jb-sp-4: 16px;
  --jb-sp-6: 24px;
  --jb-sp-8: 32px;
  --jb-sp-12: 48px;
  --jb-sp-16: 64px;
  --jb-sp-24: 96px;

  /* ---------- 8. 圆角 Radius ---------- */
  --jb-r-s: 6px;
  --jb-r-m: 12px;
  --jb-r-l: 20px;
  --jb-r-pill: 999px;

  /* ---------- 9. 阴影 Elevation ---------- */
  --jb-sh-1: 0 1px 2px rgba(6, 27, 60, .06);
  --jb-sh-2: 0 6px 20px rgba(6, 27, 60, .08);
  --jb-sh-3: 0 20px 48px rgba(6, 27, 60, .14);
  --jb-sh-gold: 0 6px 22px rgba(201, 162, 75, .28);

  /* ---------- 10. 动效 Motion ---------- */
  --jb-ease: cubic-bezier(.2, .7, .3, 1);
  --jb-dur-fast: 150ms;
  --jb-dur-base: 260ms;
  --jb-dur-slow: 480ms;

  /* ---------- 11. 版式网格 Grid ---------- */
  --jb-container: 1200px;
  --jb-gutter: 24px;
}

/* ==========================================================================
   暗色主题（屏幕端 / 深色背景场景）
   ========================================================================== */
[data-theme="dark"] {
  --jb-paper: #0A1526;
  --jb-canvas: #04122A;
  --jb-ink-900: #F4F7FD;
  --jb-ink-800: #E7EEFA;
  --jb-ink-700: #C3C9D4;
  --jb-ink-600: #949CAB;
  --jb-ink-500: #8FB0DC;
  --jb-ink-400: #5B8ACB;
  --jb-ink-300: #1B3A66;
  --jb-ink-200: #12305A;
  --jb-ink-100: #0C2347;
}

/* ==========================================================================
   品牌基础组件
   ========================================================================== */
.jb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jb-sp-2);
  min-height: 44px;                 /* 无障碍触控区 ≥44px */
  padding: 0 var(--jb-sp-6);
  font-family: var(--jb-font-sans); font-size: var(--jb-fs-body); font-weight: 500;
  border: 1px solid transparent; border-radius: var(--jb-r-s);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: all var(--jb-dur-fast) var(--jb-ease);
}
.jb-btn:focus-visible { outline: 2px solid var(--jb-navy-500); outline-offset: 2px; }
.jb-btn--primary { background: var(--jb-navy-800); color: #fff; }
.jb-btn--primary:hover { background: var(--jb-navy-700); box-shadow: var(--jb-sh-2); }
.jb-btn--gold { background: var(--jb-gold-500); color: var(--jb-navy-900); font-weight: 600; }
.jb-btn--gold:hover { background: var(--jb-gold-400); box-shadow: var(--jb-sh-gold); }
.jb-btn--ghost { background: transparent; color: var(--jb-navy-800); border-color: var(--jb-ink-300); }
.jb-btn--ghost:hover { border-color: var(--jb-navy-800); background: var(--jb-navy-50); }

.jb-card {
  background: var(--jb-paper); border: 1px solid var(--jb-ink-200);
  border-radius: var(--jb-r-m); box-shadow: var(--jb-sh-1);
  transition: box-shadow var(--jb-dur-base) var(--jb-ease), transform var(--jb-dur-base) var(--jb-ease);
}
.jb-card:hover { box-shadow: var(--jb-sh-2); transform: translateY(-2px); }

.jb-input {
  min-height: 44px; padding: 0 var(--jb-sp-3);
  font-family: var(--jb-font-sans); font-size: var(--jb-fs-body);
  color: var(--jb-ink-900); background: var(--jb-paper);
  border: 1px solid var(--jb-ink-300); border-radius: var(--jb-r-s);
  transition: border-color var(--jb-dur-fast) var(--jb-ease), box-shadow var(--jb-dur-fast) var(--jb-ease);
}
.jb-input:focus { outline: none; border-color: var(--jb-navy-500); box-shadow: 0 0 0 3px rgba(42, 102, 184, .14); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}