/* ============================================================================
   智泽教务管理系统 — 跨端设计 Token 系统 (Design Tokens)
   ----------------------------------------------------------------------------
   基线方案：对标主流教务 SaaS 的清爽专业风。
   适用范围：后台管理端 / 移动端 H5 / 官网 三端共用。
   原则：
     - 品牌主色统一为蓝 (#2563eb)，后台原 FastAdmin 彩虹色全部下线。
     - 紫仅用于品牌渐变（hero/品牌时刻），琥珀仅用于标记/高亮，不滥用于全局背景。
     - 语义四色（成功/警告/错误/信息）统一，状态展示用 Badge 而非随机色块。
   兼容性：采用 hex + rgb 通道变量（不依赖 oklch，照顾老旧浏览器/培训机构终端）。
   版本：v1.0.0  (2026-08-04)
   ========================================================================== */

:root {
  /* ===================== 品牌元数据（阶段5 单一改动点） ===================== */
  /* 接入真实校徽/校名/品牌色时，只需修改本区与前缀 --brand-* 即可，全端联动。
     校徽图片位置：public/assets/img/school-logo.png
     登录页/后台 logo 已预留接入位（见 admin-theme.css .zz-logo-mark） */
  --brand-name: "智泽教务管理系统";
  --brand-logo: url("../../assets/img/school-logo.png"); /* 缺省时自动回退到文字占位 */

  /* ===================== 品牌色 Brand ===================== */
  --brand-50:  #eff6ff;
  --brand-050: var(--brand-50); /* 浅底别名：供快捷入口/业务流等浅色底使用 */
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: var(--brand-primary, #3b82f6); /* 后台「品牌主色」驱动，全站联动 */
  --brand-600: var(--brand-primary, #2563eb); /* 主色 primary：跟随后台「品牌主色」；未配置时回退 #2563eb */
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
  --brand-950: #172554;

  /* 品牌渐变：仅用于 hero / 品牌时刻 / 主按钮 hover 高光，禁止做全局页面背景 */
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --brand-gradient-soft: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);

  /* ===================== 辅助色 Secondary（紫，仅渐变/强调点缀） ===================== */
  --secondary-400: #a78bfa;
  --secondary-500: #7c3aed;
  --secondary-600: #6d28d9;

  /* ===================== 强调色 Accent（琥珀，仅标记/高亮） ===================== */
  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #d97706;

  /* ===================== 语义色 Semantic ===================== */
  --success-50:  #ecfdf5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --error-50:    #fef2f2;
  --error-500:   #ef4444;
  --error-600:   #dc2626;
  --error-700:   #b91c1c;

  --info-50:     #eff6ff;
  --info-500:    #3b82f6;
  --info-600:    #2563eb;
  --info-700:    #1d4ed8;

  /* ===================== 中性色 Neutral ===================== */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* 语义别名（组件直接用这些，方便主题切换） */
  --bg-app:        var(--gray-50);
  --bg-surface:    #ffffff;
  --bg-subtle:     var(--gray-100);
  --bg-inset:      var(--gray-50);
  --bg-hover:      var(--gray-100);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-400);
  --text-on-brand:   #ffffff;
  --text-on-accent:  #1f2937;

  /* ===================== 字体 Typography ===================== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px; /* 后台密集型界面基准 */
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  30px;
  --fs-5xl:  36px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.25;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ===================== 间距 Spacing（4px 基准） ===================== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ===================== 圆角 Radius ===================== */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 999px;

  /* ===================== 阴影 Shadow（蓝调柔和，替代原 3px 硬边） ===================== */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:   0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl:   0 20px 48px rgba(15, 23, 42, 0.12);
  --shadow-brand: 0 8px 20px rgba(37, 99, 235, 0.25);

  /* ===================== 过渡 Transition ===================== */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 120ms var(--ease-out);
  --t-base: 200ms var(--ease-out);
  --t-slow: 320ms var(--ease-out);

  /* ===================== 层级 z-index ===================== */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
  --z-tooltip: 500;

  /* ===================== 控件尺寸 Control sizes ===================== */
  --ctrl-h-sm: 32px;
  --ctrl-h-md: 38px;
  --ctrl-h-lg: 44px;
  --touch-target: 44px; /* 移动端最小点击区 WCAG/移动规范 */

  /* ===================== 容器 Container ===================== */
  --container-max: 1280px;
}

/* ============================================================================
   方案B：主题系统（v2.1.0）
   ----------------------------------------------------------------------------
   统一主题入口：单一根属性 data-zz-theme，值为明暗组合：brand | brand-dark
   三端（后台 / H5 / 官网）共用，localStorage['zz_theme'] 持久化。
   说明：v2.0 曾支持 4 套自选皮肤（green/purple/orange/rose），
         C2 已按需求删除，恢复仅机构默认主色（由后台 meta 注入 --brand-primary）。
         当前仅保留明暗维度；如需恢复自选皮肤，需重新引入皮肤选择器块。

   优先级（从低到高）：
     1. :root                机构默认主色(由后台 meta 注入 --brand-primary) + 亮色中性
     2. [data-zz-theme$="dark"] 暗色（只覆写中性/背景/阴影/文字）
     3. [data-zz-context]    端上下文（后台/H5/官网差异化，扩展位）

   向后兼容：旧 data-theme="dark" 属性保留为别名（转发到同一变量）。
   ========================================================================== */

/* ===================== 暗色维度（明暗独立于色相） =====================
   应用：data-zz-theme 以 -dark 结尾，如 'brand-dark' 或 'green-dark' */
[data-zz-theme$="dark"] {
  --bg-app:        #0b1120;
  --bg-surface:    #111827;
  --bg-subtle:     #1e293b;
  --bg-inset:      #0f172a;
  --bg-hover:      #1f2937;
  --border:        #1f2937;
  --border-strong: #334155;
  --text-primary:    #f1f5f9;
  --text-secondary:  #94a3b8;
  --text-tertiary:   #64748b;
  --text-on-brand:   #ffffff;

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-xl:   0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 8px 20px rgba(37, 99, 235, 0.4);
}

/* ===================== 向后兼容别名（老属性 → 同一变量） =====================
   旧代码 / 旧 localStorage 迁移完成前，data-theme 依然可用（皮肤自选已下线，data-skin 不再保留别名）。 */
:root[data-theme="dark"]:not([data-zz-theme]) {
  --bg-app:#0b1120; --bg-surface:#111827; --bg-subtle:#1e293b; --bg-inset:#0f172a; --bg-hover:#1f2937;
  --border:#1f2937; --border-strong:#334155;
  --text-primary:#f1f5f9; --text-secondary:#94a3b8; --text-tertiary:#64748b; --text-on-brand:#ffffff;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4); --shadow-sm:0 1px 3px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 12px rgba(0,0,0,0.5); --shadow-lg:0 12px 28px rgba(0,0,0,0.55);
  --shadow-xl:0 20px 48px rgba(0,0,0,0.6); --shadow-brand:0 8px 20px rgba(37,99,235,0.4);
}