/* ============================================================
   byte58 教学系统 · 统一设计令牌（tokens.css）
   方向：B 温暖人文 · 2026-09-23
   规则：页面只允许引用这里的变量，不再自己定义色值和圆角。
   ============================================================ */

:root {
  /* ---- 颜色：1 主色 + 4 语义色 + 中性阶 ---- */
  --t-brand:        #1f6f5c;   /* 主色（深绿）。白字对比度 6.02:1 */
  --t-brand-strong: #175c4c;   /* hover / active */
  --t-brand-soft:   #e6f1ec;   /* 主色浅底（选中、标记） */

  --t-ok:      #1f6f5c;        /* 成功。与主色同源，避免第二个"好"的颜色 */
  --t-ok-soft: #e6f1ec;
  --t-warn:    #8a5a2b;        /* 警告。白底 5.87:1 */
  --t-warn-soft:#f6ece0;
  --t-bad:     #b0473a;        /* 危险 / 异常。白底 5.52:1 */
  --t-bad-soft:#f7e8e5;
  --t-info:    #2c5f7c;        /* 信息。白底 6.91:1 */
  --t-info-soft:#e6eff3;

  /* ---- 中性阶：页面 90% 的颜色来自这里 ---- */
  --t-bg:        #faf7f2;      /* 页面底 */
  --t-surface:   #ffffff;      /* 卡片 */
  --t-surface-2: #f3efe7;      /* 次级面（表头、条纹） */
  --t-line:      #e6e2da;      /* 描边 / 分隔 */
  --t-line-2:    #d5cec2;      /* 强调分隔 */
  --t-text:      #22252b;      /* 正文。底上对比度 14.8:1 */
  --t-text-muted:#666b75;      /* 次要文字。底上 5.0:1 */
  --t-text-faint:#8b9099;      /* 三级文字，仅用于字号 ≥14px 的非关键信息 */
  --t-on-brand:  #ffffff;

  /* ---- 间距：8pt 体系，节奏只留四档 ---- */
  --t-s1: 4px;
  --t-s2: 8px;
  --t-s3: 12px;
  --t-s4: 16px;
  --t-s5: 24px;
  --t-s6: 32px;
  --t-s7: 40px;
  --t-s8: 64px;

  /* ---- 圆角：只允许 3 档 + 胶囊 ---- */
  --t-r-sm: 6px;     /* 标签、输入框、小按钮 */
  --t-r-md: 12px;    /* 卡片、面板 */
  --t-r-lg: 18px;    /* 大面积容器、Hero */
  --t-r-pill: 999px;

  /* ---- 阴影：只允许 3 档，方向一致（向下） ---- */
  --t-e1: 0 1px 2px rgba(34, 37, 43, .06);
  --t-e2: 0 4px 12px rgba(34, 37, 43, .07);
  --t-e3: 0 12px 32px rgba(34, 37, 43, .09);

  /* ---- 字阶：比例 1.25，5 档封顶 ---- */
  --t-f1: 12px;      /* 标签、辅助 */
  --t-f2: 14px;      /* 正文基准 */
  --t-f3: 16px;      /* 小标题 */
  --t-f4: 20px;      /* 区块标题 */
  --t-f5: 30px;      /* 页面主标题 */

  --t-fw-normal: 400;
  --t-fw-medium: 500;
  --t-fw-bold:   600;

  --t-font: "Source Sans 3", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --t-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- 动效：只做状态反馈 ---- */
  --t-t: 160ms cubic-bezier(.2, .8, .2, 1);
}

/* 数字统一等宽对齐：表格、指标、金额 */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============================================================
   页面级适配层（adapter）
   各模块历史上用了各自命名的变量，这里把它们接到统一令牌上。
   旧代码不用改一个字，变量名照旧可用，值全部来自上面。
   ============================================================ */

/* 注意：适配器必须写成 `:root, html`。
   模块自己的内联样式用的是 `:root`（特异性 0,1,0），比 `html`（0,0,1）高，
   只写 html 会被压住，跟加载顺序无关。 */

/* --- 适配器 A：竞赛看板 / 教师驾驶舱（--bg --panel --blue --violet …） --- */
:root, html {
  --bg:         var(--t-bg);
  --panel:      var(--t-surface);
  --surface:    var(--t-surface);
  --bg-card:    var(--t-surface);
  --line:       var(--t-line);
  --border:     var(--t-line);
  --text:       var(--t-text);
  --text-primary: var(--t-text);
  --muted:      var(--t-text-muted);
  --blue:       var(--t-brand);
  --blue-soft:  var(--t-brand-soft);
  --green:      var(--t-ok);
  --green-soft: var(--t-ok-soft);
  --amber:      var(--t-warn);
  --amber-soft: var(--t-warn-soft);
  --red:        var(--t-bad);
  --red-soft:   var(--t-bad-soft);
  --violet:     var(--t-info);
  --violet-soft: var(--t-info-soft);
  --slate-soft: var(--t-surface-2);
  --shadow:     var(--t-e3);
  --radius:     var(--t-r-md);
  --card-shadow:var(--t-e1);
  --transition: var(--t-t);

  /* 竞赛页（modules/competition）的 slate 灰阶与紫色强调。
     该页是浅色主题，按明度把灰阶接到中性阶上即可。
     ⚠️ 深色主题的模块页（market-research / 仿真 / 大屏 / procurement）
     刻意不引入本文件，见 design-spec.md「深色模块页豁免」。 */
  --slate-100: var(--t-surface-2);
  --slate-200: var(--t-line);
  --slate-300: var(--t-line-2);
  --slate-400: var(--t-text-faint);
  --slate-500: var(--t-text-muted);
  --slate-600: var(--t-text-muted);
  --slate-700: var(--t-text);
  --slate-800: var(--t-text);
  --slate-900: var(--t-text);
  --purple:    var(--t-info);
  --radius-xl: var(--t-r-lg);
  --radius-lg: var(--t-r-lg);
  --radius-sm: var(--t-r-sm);
}

/* --- 适配器 B：公共样式表（--primary --gray-* --shadow-*） --- */
:root, html {
  --primary:       var(--t-brand);
  --primary-dark:  var(--t-brand-strong);
  --primary-light: var(--t-brand-soft);
  --primary-soft:  var(--t-brand-soft);
  --secondary:     var(--t-info);
  --success:       var(--t-ok);
  --success-soft:  var(--t-ok-soft);
  --warning:       var(--t-warn);
  --warning-soft:  var(--t-warn-soft);
  --danger:        var(--t-bad);
  --danger-soft:   var(--t-bad-soft);
  --info:          var(--t-info);
  --accent:        var(--t-warn);
  --highlight:     var(--t-brand);
  --border-radius: var(--t-r-md);
  --radius-sm:     var(--t-r-sm);
  --radius-md:     var(--t-r-md);
  --radius-lg:     var(--t-r-lg);
  --shadow-sm:     var(--t-e1);
  --shadow-md:     var(--t-e2);
  --shadow-lg:     var(--t-e3);
  --gray-50:  #fafaf8;
  --gray-100: #f3f1ec;
  --gray-200: #e6e2da;
  --gray-300: #d5cec2;
  --gray-400: #a8a29a;
  --gray-500: #8b9099;
  --gray-600: #666b75;
  --gray-700: #4a4e56;
  --gray-800: #33363c;
  --gray-900: #22252b;
}

/* ============================================================
   结构归一化：去掉装饰性渐变、统一圆角与阴影
   ============================================================ */

/* 页面底：不再是渐变；字体与正文色一并接管 */
body {
  background: var(--t-bg);
  color: var(--t-text);
  font-family: var(--t-font);
  font-size: var(--t-f2);
  line-height: 1.65;
}

/* Hero / 主视觉：渐变 → 主色实底。这是"高级"最明显的一步 */
.hero {
  background: var(--t-brand) !important;
  color: var(--t-on-brand);
  border-radius: var(--t-r-lg) !important;
  box-shadow: none !important;
  padding: var(--t-s6) !important;
}
.hero h1 { font-size: var(--t-f5); font-weight: var(--t-fw-bold); letter-spacing: -.01em; }
.hero p { color: rgba(255, 255, 255, .86); }

/* 卡片：统一圆角 + 统一浅阴影，去掉玻璃拟态 */
.card, .section, .kpi-card, .stage-card, .table-wrap, .control-card, .panel {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-r-md) !important;
  box-shadow: var(--t-e1) !important;
  backdrop-filter: none !important;
}
.hero, .control-card { border-radius: var(--t-r-lg) !important; }

/* 出现在卡片上的浅色渐变一律压平 */
.card[style*="gradient"], .section-body[style*="gradient"] { background: var(--t-surface) !important; }

/* 进度条 / 强调条：渐变 → 主色实底 */
.progress-bar, .bar-fill, .stage-bar {
  background: var(--t-brand) !important;
  border-radius: var(--t-r-pill) !important;
}

/* 标签 / 徽标：统一胶囊，语义色只用于语义 */
.tag, .badge, .chip {
  border-radius: var(--t-r-sm) !important;
  font-weight: var(--t-fw-medium);
}
.pill { border-radius: var(--t-r-pill); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }

/* 按钮：统一圆角与过渡 */
.btn, .btn-primary, .btn-secondary, button {
  border-radius: var(--t-r-sm) !important;
  transition: background var(--t-t), border-color var(--t-t), color var(--t-t);
}
.btn-primary { background: var(--t-brand); color: var(--t-on-brand); border-color: transparent; }
.btn-primary:hover { background: var(--t-brand-strong); }

/* 表格：数字等宽；表头用次级面而不是色块 */
.table-wrap table { font-variant-numeric: tabular-nums; }
.table-wrap th { background: var(--t-surface-2) !important; color: var(--t-text-muted); font-weight: var(--t-fw-medium); }
.table-wrap td, .table-wrap th { border-color: var(--t-line) !important; }

/* 表单控件 */
input, select, textarea {
  border-radius: var(--t-r-sm) !important;
  border-color: var(--t-line-2) !important;
  font-size: var(--t-f2);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--t-brand);
  outline-offset: 2px;
}

/* 语义色：只在真的表示状态时出现 */
.is-warn, .status-warn { color: var(--t-warn); }
.is-bad,  .status-bad  { color: var(--t-bad); }
.is-ok,   .status-ok   { color: var(--t-ok); }

/* 投屏 / 全屏遮罩：保留深色，这是有意为之 */
.fullscreen-overlay, .presentation-overlay, .modal-backdrop { color: #fff; }

/* 登录页：全站唯一允许保留的渐变，但收敛为同色相两停，
   原来是 蓝→天蓝→靛 三色跨色相，属于典型的"脏渐变"来源 */
.login-page {
  background: linear-gradient(160deg, var(--t-brand-strong) 0%, var(--t-brand) 100%) !important;
}
.login-container, .login-card {
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-e3) !important;
}

/* ============================================================
   交互态与状态占位
   统一在令牌层定义，各模块只要用了标准标签就自动生效。
   ============================================================ */

/* 过渡：只做状态反馈，不做装饰 */
.btn, button, a.btn, input, select, textarea, .nav-item, .tab, .chip {
  transition: background-color var(--t-t), border-color var(--t-t),
              color var(--t-t), box-shadow var(--t-t), transform 120ms ease-out;
}

/* hover：给"可点"的信号，不靠变色吓人 */
.btn:hover, button:not(:disabled):not([disabled]):hover,
.nav-item:hover, .tab:hover, .chip:hover {
  border-color: var(--t-line-2);
  background-color: var(--t-surface-2);
}
.btn-primary:hover, button.primary:hover { background-color: var(--t-brand-strong); }
tbody tr:hover, .table-wrap tbody tr:hover { background-color: var(--t-surface-2); }

/* active：按下要有物理反馈 */
.btn:active, button:not(:disabled):active, .nav-item:active, .tab:active {
  transform: translateY(1px);
}

/* disabled：必须一眼看出不可用 */
button:disabled, button[disabled], .btn[disabled], [aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--t-surface-2);
  color: var(--t-text-muted);
  cursor: not-allowed;
}

/* focus：键盘用户必须看得见焦点（鼠标点击不显示） */
:focus-visible {
  outline: 2px solid var(--t-brand);
  outline-offset: 2px;
  border-radius: var(--t-r-sm);
}

/* 状态占位：加载 / 空 / 错误，各系统沿用同名 class 即可 */
.empty-state, .is-empty, .empty {
  color: var(--t-text-muted);
}
.loading-state, .is-loading, .loading, .skeleton {
  color: var(--t-text-muted);
  background-image: linear-gradient(90deg, var(--t-surface-2) 25%, var(--t-line) 37%, var(--t-surface-2) 63%);
  background-size: 400% 100%;
  animation: t-skeleton 1.4s ease-in-out infinite;
}
@keyframes t-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.error-state, .is-error, .error-msg, .form-error {
  color: var(--t-bad);
}
.alert-danger, .error-banner {
  color: var(--t-bad);
  background: var(--t-bad-soft);
  border: 1px solid rgba(176, 71, 58, .25);
  border-radius: var(--t-r-sm);
}

/* 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}