/* ==========================================================================
   学生工具箱 · Design Tokens
   小产品实验室 · tinyproductlab
   与教师工具箱同源：品牌色、表面、状态色完全一致，两个站看起来是一家的。
   学生站多一组「学段色」（决策 D7）。
   规则：组件 CSS 里禁止出现硬编码色值，一律通过这里的变量取色。
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 品牌色 --- */
  --blue-600: #1769E0;   /* 主蓝：主按钮底、链接、选中态。白字 5.1:1 */
  --blue-800: #0D47A1;   /* 深蓝：hover、标题强调。白字 8.6:1 */
  --yellow-500: #FFB516; /* 强调黄：其上一律用 --text，白字仅 1.8:1 */
  --purple-600: #7C3AED; /* 大学段主色。白字 5.7:1；深字只有 2.8:1，紫底一律白字 */

  /* --- 学段色（决策 D7）---
     初稿用 🧡💙💜 三个 emoji 区分学段，换成色块 + 文字标签：
     emoji 在 Windows 一体机和旧 Android 上渲染差别大，读屏还会念成「橙色的心」。
     颜色**不作为唯一区分手段** —— 每处都同时写着学段名。 */
  --stage-primary: var(--yellow-500);
  --stage-secondary: var(--blue-600);
  --stage-university: var(--purple-600);
  --stage-common: var(--success);
  /* 浅底上的学段「文字」用这几个，原色里黄色和绿色当文字不达标 */
  --stage-primary-text: #8A5A00;    /* 白底 5.9:1（黄色原色当文字只有 1.8:1） */
  --stage-secondary-text: #1769E0;
  --stage-university-text: #6D28D9; /* 白底 7.1:1 */
  --stage-common-text: #15803D;

  /* --- 表面与文字 --- */
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E4E9F2;
  --text: #182234;
  --text-muted: #667085;      /* 在 --bg 上 4.7:1 */
  --text-on-brand: #FFFFFF;   /* 蓝底上的文字 */
  --text-on-accent: #182234;  /* 黄底上的文字（不要用白色） */

  /* --- 状态色 ---
     原色只用于色块 / 图标 / 边框 / 进度条；
     浅底上的「文字」必须用 -text 变体，否则对比度不达标。 */
  --success: #22C55E;
  --success-text: #15803D;    /* 白底 5.0:1 */
  --danger: #EF4444;          /* 只用于色块、图标、边框；白字仅 3.8:1，不够 */
  --danger-text: #B91C1C;     /* 浅底上的错误文字，6.5:1 */
  /* 危险按钮专用：底色比 --danger 深，白字才够 AA（6.5:1） */
  --danger-strong: #B91C1C;
  --text-on-danger: #FFFFFF;

  /* --- 圆角（文档 10.3） --- */
  --radius-card: 18px;
  --radius-control: 11px;

  /* --- 间距与栅格 --- */
  --page-max: 1440px;
  --page-pad: 16px;           /* 手机 */
  --gap: 16px;

  /* --- 字体（文档 10.2，不依赖 Google Fonts） --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- 阴影（暗色下改用明度分层，不用阴影） --- */
  --shadow-card: 0 1px 2px rgba(24, 34, 52, .04), 0 8px 24px rgba(24, 34, 52, .06);

  /* --- 最小可点击尺寸（文档第 18 章） --- */
  --tap-min: 44px;
}

@media (min-width: 768px) {
  :root { --page-pad: 24px; }
}
@media (min-width: 1200px) {
  :root { --page-pad: 56px; }
}

/* ==========================================================================
   暗色（文档 10.1.2）
   不是浅色反相：蓝/黄/绿/红全部提亮，表面靠明度分层。
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --blue-600: #5AA0FF;        /* 暗底 6.2:1 */
    --blue-800: #5AA0FF;
    --yellow-500: #FFC44D;      /* 暗底 10.3:1 */
    --purple-600: #A78BFA;      /* 暗底 6.7:1，卡片面 6.0:1 */
    --stage-primary-text: #FFC44D;
    --stage-secondary-text: #5AA0FF;
    --stage-university-text: #A78BFA;
    --stage-common-text: #4ADE80;

    --bg: #0F1520;
    --surface: #18202E;
    --surface-raised: #212B3B;
    --border: #2E3A4D;
    --text: #E8EDF5;            /* 暗底 15.6:1 */
    --text-muted: #9AA7BC;      /* 暗底 6.7:1 */
    --text-on-brand: #0F1520;
    --text-on-accent: #182234;

    --success: #4ADE80;         /* 暗底 9.4:1 */
    --success-text: #4ADE80;
    --danger: #FF6B6B;          /* 暗底 5.9:1 */
    --danger-text: #FF6B6B;
    /* 暗色下红色被提亮了，白字反而只剩 2.8:1；改用深色字，6.6:1 */
    --danger-strong: #FF6B6B;
    --text-on-danger: #0F1520;

    --shadow-card: none;
  }
}

/* 用户在设置里显式选择时，用属性覆盖系统偏好 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --blue-600: #5AA0FF;
  --blue-800: #5AA0FF;
  --yellow-500: #FFC44D;

  --purple-600: #A78BFA;      /* 暗底 6.7:1，卡片面 6.0:1 */
  --stage-primary-text: #FFC44D;
  --stage-secondary-text: #5AA0FF;
  --stage-university-text: #A78BFA;
  --stage-common-text: #4ADE80;

  --bg: #0F1520;
  --surface: #18202E;
  --surface-raised: #212B3B;
  --border: #2E3A4D;
  --text: #E8EDF5;
  --text-muted: #9AA7BC;
  --text-on-brand: #0F1520;
  --text-on-accent: #182234;

  --success: #4ADE80;
  --success-text: #4ADE80;
  --danger: #FF6B6B;
  --danger-text: #FF6B6B;
  --danger-strong: #FF6B6B;
  --text-on-danger: #0F1520;

  --shadow-card: none;
}