/* ============================================================
   学生升学与学业规划管理系统 — Design Tokens v4.0
   ============================================================
   单一真源 (Single Source of Truth) for all design tokens.

   原则:
   1. 所有颜色 / 字号 / 间距 / 圆角 / 阴影 / z-index / 动效
      只能引用本文件定义的 CSS 变量,不允许业务代码再出现裸值。
   2. 旧 token 名通过"兼容层"映射到新名,保证现有 451 处
      var() 调用不破坏。Phase 4 完成后清除兼容层。
   3. 暗色模式只重写底层 surface/text/shadow,语义色自动派生。
   4. 引入顺序: tokens.css 必须先于其他 CSS 加载。

   命名约定:
     --color-{role}-{shade}       e.g. --color-brand-600
     --color-{semantic}-{slot}    e.g. --color-success-bg
     --font-size-{scale}          e.g. --font-size-sm
     --space-{n}                  e.g. --space-4  (按 4px 网格)
     --radius-{scale}             e.g. --radius-md
     --shadow-{scale}             e.g. --shadow-md
     --z-{slot}                   e.g. --z-modal
     --motion-{scale}             e.g. --motion-fast
   ============================================================ */

:root {
  /* ============================================================
     1. COLOR — Brand (主品牌色 · 管理端/agent 内部)
     ============================================================ */
  --color-brand-50:   #eff6ff;
  --color-brand-100:  #dbeafe;
  --color-brand-200:  #bfdbfe;
  --color-brand-300:  #93c5fd;
  --color-brand-400:  #60a5fa;
  --color-brand-500:  #3b82f6;
  --color-brand-600:  #2563eb;   /* 主操作色: 按钮、链接、focus ring */
  --color-brand-700:  #1d4ed8;   /* hover */
  --color-brand-800:  #1e40af;
  --color-brand-900:  #1e3a8a;

  /* ============================================================
     2. COLOR — Brand Crimson (外部学生申请门户专用)
     ============================================================
     仅在 agent.html (学生申请门户) 使用,与内部蓝色品牌
     刻意区分,标示"这是给学生看的产品表面"。
     ============================================================ */
  --color-crimson-50:  #fdf5f3;
  --color-crimson-100: #fbe9e6;
  --color-crimson-200: #f5c8c2;
  --color-crimson-300: #e89788;
  --color-crimson-400: #c44056;
  --color-crimson-500: #a51c30;   /* 主操作色 */
  --color-crimson-600: #8c1a28;   /* hover */
  --color-crimson-700: #6f1320;

  /* ============================================================
     3. COLOR — Semantic (语义色 · 跨产品共享)
     ============================================================ */
  /* Success */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;   /* badge 背景 */
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;   /* 主色 (icon / 边框) */
  --color-success-700: #15803d;
  --color-success-900: #14532d;   /* badge 文字 */

  /* Warning */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-900: #92400e;

  /* Danger */
  --color-danger-50:   #fef2f2;
  --color-danger-100:  #fee2e2;
  --color-danger-200:  #fecaca;
  --color-danger-300:  #fca5a5;
  --color-danger-400:  #f87171;
  --color-danger-500:  #ef4444;
  --color-danger-600:  #dc2626;
  --color-danger-700:  #b91c1c;
  --color-danger-900:  #991b1b;

  /* Info */
  --color-info-50:     #f0f9ff;
  --color-info-100:    #e0f2fe;
  --color-info-200:    #bae6fd;
  --color-info-300:    #7dd3fc;
  --color-info-400:    #38bdf8;
  --color-info-500:    #0ea5e9;
  --color-info-600:    #0284c7;
  --color-info-700:    #0369a1;
  --color-info-900:    #075985;

  /* Neutral (灰阶) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* ============================================================
     4. COLOR — Surface (面板背景,使用 neutral 别名)
     ============================================================ */
  --color-surface-page:           var(--color-neutral-50);    /* 页面底色 */
  --color-surface-card:           var(--color-neutral-0);     /* 卡片/modal */
  --color-surface-subtle:         var(--color-neutral-100);   /* 次级面板 / hover */
  --color-surface-emphasis:       var(--color-neutral-200);   /* 分割条 / disabled */
  --color-surface-sidebar:        var(--color-neutral-800);   /* 侧边栏 */
  --color-surface-sidebar-hover:  var(--color-neutral-700);
  --color-surface-overlay:        rgba(15, 23, 42, 0.55);    /* modal 遮罩 */

  /* Dark Intake palette (暗色模式专用 - intake/kanban/md 等密集卡片场景) */
  --color-dark-surface-1: #1a1a2e;   /* 最深 (case detail panel 底色) */
  --color-dark-surface-2: #1e1e2e;   /* 默认面板 */
  --color-dark-surface-3: #252538;   /* 面板 header */
  --color-dark-surface-4: #263145;   /* hover / table stripe */
  --color-dark-surface-5: #2a2a4a;   /* hover 提升 */
  --color-dark-surface-6: #2d3a52;   /* table stripe hover */
  --color-dark-surface-7: #2e2e5a;   /* active selected */
  --color-dark-border:    #3a3a5a;   /* 默认边框 */
  --color-dark-border-strong: #4a4a6a; /* hover 边框 */

  /* ============================================================
     5. COLOR — Text (文字层级)
     ============================================================ */
  --color-text-primary:    var(--color-neutral-900);  /* 标题、关键信息 */
  --color-text-secondary:  var(--color-neutral-600);  /* 正文 */
  --color-text-tertiary:   var(--color-neutral-400);  /* 辅助、placeholder */
  --color-text-disabled:   var(--color-neutral-300);
  --color-text-inverse:    var(--color-neutral-0);    /* 深底上文字 */
  --color-text-link:       var(--color-brand-600);
  --color-text-link-hover: var(--color-brand-700);
  --color-text-on-brand:   var(--color-neutral-0);
  --color-text-on-success: var(--color-success-900);
  --color-text-on-warning: var(--color-warning-900);
  --color-text-on-danger:  var(--color-danger-900);
  --color-text-on-info:    var(--color-info-900);

  /* ============================================================
     6. COLOR — Border
     ============================================================ */
  --color-border-subtle:  var(--color-neutral-100);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-focus:   var(--color-brand-300);
  --color-border-danger:  var(--color-danger-500);

  /* ============================================================
     7. TYPOGRAPHY — Font Family
     ============================================================ */
  --font-family-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ============================================================
     8. TYPOGRAPHY — Type Scale (9 档,禁止额外字号)
     ============================================================
     使用规则:
     - xs(11px): 微标签、徽章文字、紧凑表格单元
     - sm(12px): 辅助文字、表单 hint、面包屑
     - base(14px): 正文默认、表格、按钮
     - md(16px): 表单输入、强调正文
     - lg(18px): h5 / 卡片标题
     - xl(20px): h4 / 区块小标题
     - 2xl(24px): h3 / 区块标题
     - 3xl(32px): h2 / 页面标题、KPI 数字
     - 4xl(40px): h1 / hero 页面
     禁止: 0.6rem / 0.65rem / 0.68rem / 0.72rem / 0.78rem / 0.82rem / 0.85rem ...
     ============================================================ */
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  32px;
  --font-size-4xl:  40px;

  /* ============================================================
     9. TYPOGRAPHY — Line Height
     ============================================================ */
  --line-height-tight:   1.2;    /* 标题 */
  --line-height-snug:    1.4;    /* 小字、紧凑列表 */
  --line-height-normal:  1.5;    /* 正文默认 */
  --line-height-relaxed: 1.7;    /* 长段落、说明 */

  /* ============================================================
     10. TYPOGRAPHY — Font Weight
     ============================================================ */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ============================================================
     11. SPACING — 4px 网格 (索引即 ×4px)
     ============================================================
     使用规则:
     - space-1(4px): icon-text gap (最小)
     - space-2(8px): 表单字段内、按钮 padding-y
     - space-3(12px): 按钮 padding-x、紧凑卡 padding
     - space-4(16px): 默认 gap、表单字段间
     - space-5(20px): 中等卡 padding
     - space-6(24px): 卡片 padding 默认
     - space-8(32px): 区块间距
     - space-10(40px): 大区块
     - space-12(48px): 页面级 padding
     - space-16(64px): hero / 顶部留白
     禁止: 5/7/9/11/13/15/17/18/19/21 等非 4 倍数
     ============================================================ */
  --space-0:    0;
  --space-px:   1px;     /* hairline 用 */
  --space-0-5:  2px;     /* 仅 icon 微调 */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ============================================================
     12. RADIUS
     ============================================================
     注: 与现有 style.css 已存在的 radius 尺度对齐 (6/10/14/18),
         避免迁移期视觉退化。Phase 4 可重新评估是否切到 8/12/16
         的 Tailwind 标准尺度。
     ============================================================ */
  --radius-xs:   4px;     /* checkbox, tag */
  --radius-sm:   6px;     /* input, button (sm) */
  --radius-md:  10px;     /* default control */
  --radius-lg:  14px;     /* card */
  --radius-xl:  18px;     /* modal, large card */
  --radius-2xl: 24px;     /* hero card */
  --radius-full: 9999px;  /* pill, avatar */

  /* ============================================================
     13. SHADOW
     ============================================================
     使用规则:
     - xs: 表格行 hover / 微微抬升
     - sm: 默认卡片
     - md: 抬升卡片(hover 后) / 下拉
     - lg: 浮层卡片 / popover
     - xl: modal / 大面板
     - focus: 焦点环(键盘可达) / 主品牌色
     - focus-danger: 危险输入焦点
     ============================================================ */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:    0 1px 4px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 16px rgba(15, 23, 42, 0.09), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 10px 32px rgba(15, 23, 42, 0.11), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl:    0 24px 56px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-focus:        0 0 0 3px rgba(37, 99, 235, 0.25);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.25);
  --shadow-focus-success: 0 0 0 3px rgba(22, 163, 74, 0.25);

  /* ============================================================
     14. Z-INDEX (层级表 · 禁止用其他值)
     ============================================================
     从低到高,每层留 10 缓冲,新组件请加入此表而非自创数字。
     ============================================================ */
  --z-base:     0;
  --z-raised:   10;     /* hover 卡片提升 */
  --z-sticky:   20;     /* sticky 表头、sticky bar */
  --z-fixed:    100;    /* 固定按钮 / 回到顶部 */
  --z-dropdown: 1000;   /* 下拉、菜单 */
  --z-sidebar:  1010;
  --z-topnav:   1020;
  --z-overlay:  1040;   /* modal 遮罩 */
  --z-modal:    1050;
  --z-popover:  1060;
  --z-toast:    1070;
  --z-tooltip:  1080;   /* UI 最高层 */

  /* ============================================================
     15. MOTION
     ============================================================ */
  --motion-duration-instant: 80ms;
  --motion-duration-fast:    120ms;   /* hover / focus */
  --motion-duration-base:    200ms;   /* 默认 */
  --motion-duration-slow:    320ms;   /* modal enter / drawer */
  --motion-duration-slower:  480ms;   /* 大幅页面过渡 */

  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-enter:    cubic-bezier(0,   0, 0.2, 1);
  --motion-easing-exit:     cubic-bezier(0.4, 0, 1,   1);
  --motion-easing-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 复合 transition 速记 */
  --transition-colors: color var(--motion-duration-fast) var(--motion-easing-standard),
                       background-color var(--motion-duration-fast) var(--motion-easing-standard),
                       border-color var(--motion-duration-fast) var(--motion-easing-standard);
  --transition-base:   all var(--motion-duration-base) var(--motion-easing-standard);
  --transition-fast:   all var(--motion-duration-fast) var(--motion-easing-standard);

  /* ============================================================
     16. LAYOUT — 全局常量
     ============================================================ */
  --layout-sidebar-width:           228px;
  --layout-sidebar-width-collapsed: 64px;
  --layout-topnav-height:           56px;
  --layout-content-max-width:       1440px;
  --layout-form-max-width:          720px;
  --layout-readable-max-width:      720px;

  /* ============================================================
     17. BREAKPOINT (仅供 JS 引用,CSS 直接写 @media)
     ============================================================ */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;
}

/* ============================================================
   旧 TOKEN 兼容层 — DEPRECATED (Phase 4 清除)
   ============================================================
   保证现有 451 处 var() 调用在迁移期不破坏。
   新代码禁止使用以下任何 @deprecated 变量。
   ============================================================ */
:root {
  /* @deprecated → 用 --color-brand-600 */
  --primary:       var(--color-brand-600);
  --primary-light: var(--color-brand-100);
  --primary-dark:  var(--color-brand-700);
  --primary-glow:  rgba(37, 99, 235, 0.18);

  /* @deprecated → 用 --color-surface-sidebar / -hover */
  --sidebar-bg:     var(--color-surface-sidebar);
  --sidebar-hover:  var(--color-surface-sidebar-hover);
  --sidebar-active: var(--color-brand-600);

  /* @deprecated → 用 --color-surface-* */
  --surface-0: var(--color-surface-page);
  --surface-1: var(--color-surface-card);
  --surface-2: var(--color-surface-subtle);
  --surface-3: var(--color-surface-emphasis);

  /* @deprecated → 用 --color-text-* */
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary:  var(--color-text-tertiary);

  /* @deprecated → 用 --color-border-* */
  --border:       var(--color-border-default);
  --border-focus: var(--color-border-focus);

  /* @deprecated → 用 --shadow-focus */
  --shadow-glow: var(--shadow-focus);

  /* @deprecated → 用 --radius-full */
  --radius-pill: var(--radius-full);

  /* @deprecated → 用 --motion-* 组合 */
  --ease-fast:   var(--motion-duration-fast)   var(--motion-easing-standard);
  --ease-normal: var(--motion-duration-base)   var(--motion-easing-standard);
  --ease-slow:   var(--motion-duration-slow)   var(--motion-easing-standard);
  --ease-spring: var(--motion-duration-slow)   var(--motion-easing-spring);

  /* @deprecated → 用 --color-{semantic}-600 */
  --success: var(--color-success-600);
  --warning: var(--color-warning-600);
  --danger:  var(--color-danger-600);
  --info:    var(--color-info-600);

  /* @deprecated → 用 --layout-* */
  --sidebar-width: var(--layout-sidebar-width);
  --topnav-height: var(--layout-topnav-height);
}

/* ============================================================
   DARK MODE — 全套 token 在暗色下重映射
   ============================================================
   触发器: body.dark-mode (向后兼容) 或 [data-theme="dark"]
   策略: 只重写底层 surface/text/shadow/border,
        语义色与品牌色适度调亮以保持对比度。
   ============================================================ */
body.dark-mode,
[data-theme="dark"] {
  /* Surfaces 反转 */
  --color-surface-page:           #0f172a;
  --color-surface-card:           #1e293b;
  --color-surface-subtle:         #263145;
  --color-surface-emphasis:       #334155;
  --color-surface-sidebar:        #0a1120;
  --color-surface-sidebar-hover:  #1e293b;
  --color-surface-overlay:        rgba(0, 0, 0, 0.7);

  /* Text 反转 */
  --color-text-primary:   #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary:  #64748b;
  --color-text-disabled:  #475569;
  --color-text-inverse:   #0f172a;

  /* Border 反转 */
  --color-border-subtle:  #1e293b;
  --color-border-default: #334155;
  --color-border-strong:  #475569;

  /* Brand 适度调亮(深底上需要更亮) */
  --color-brand-600: #60a5fa;
  --color-brand-700: #93c5fd;

  /* Semantic 适度调亮 */
  --color-success-600: #4ade80;
  --color-success-100: #14532d;     /* badge 背景在暗色下用深绿 */
  --color-success-900: #bbf7d0;     /* badge 文字反转为浅绿 */

  --color-warning-600: #fbbf24;
  --color-warning-100: #78350f;
  --color-warning-900: #fde68a;

  --color-danger-600:  #f87171;
  --color-danger-100:  #7f1d1d;
  --color-danger-900:  #fecaca;

  --color-info-600:    #38bdf8;
  --color-info-100:    #0c4a6e;
  --color-info-900:    #bae6fd;

  /* Shadow 在深底上需要更深的影子 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.4);

  --shadow-focus:        0 0 0 3px rgba(96, 165, 250, 0.4);
  --shadow-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.4);
}

/* ============================================================
   ACCESSIBILITY — 减少动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast:    0ms;
    --motion-duration-base:    0ms;
    --motion-duration-slow:    0ms;
    --motion-duration-slower:  0ms;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  :root {
    --color-surface-page: #ffffff;
    --color-surface-card: #ffffff;
    --color-text-primary: #000000;
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
    --shadow-lg: none; --shadow-xl: none;
  }
}