/* ════════════════════════════════════════════════════════════════════════
   _tokens.css · MagicDawn 响应式设计令牌（design tokens）
   ────────────────────────────────────────────────────────────────────────
   作用：定义全站统一的断点 / 字号 / 间距 / 触控 / 安全区变量。
        新组件 & 移动端覆盖样式都引用这里的变量，保证视觉节奏一致、
        未来批量调优只需改这一处。

   原则：
     1. 纯追加 —— 不覆写任何现有 .class 规则，PC 端样式 100% 不受影响
     2. mobile-first 友好 —— 字号用 clamp() 自适应；空间走 4/8 网格
     3. 业界对齐 Tailwind/Bootstrap 4 档断点：sm 640 / md 768 / lg 1024 / xl 1280
     4. iOS 安全区 env() 兜底 → 刘海屏/灵动岛/底部 home indicator 不被遮
     5. prefers-reduced-motion 全局降级 → 无障碍硬性达标
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── P3b 暗色模式声明（2026-06-01） ──
       告知浏览器本站为深色站点，UA 表单控件/滚动条/选择高亮自动走深色版，
       避免 prefers-color-scheme:light 用户看到白色控件夹在黑底中。
       ⚠ 不与 :root 后续变量冲突；与 <meta name="color-scheme" content="dark"> 双保险。 */
    color-scheme: dark;

    /* ── 断点（CSS 内一般直接写 px；这里供 JS 与 @container 引用） ── */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* ── 流体字号（mobile→desktop 自动伸缩）──
       用法：font-size: var(--font-base);
       注：旧代码大量用 rem/px 魔术数字，迁移可逐步进行，新组件强制用 token */
    --font-xs:      clamp(0.72rem, 0.68rem + 0.2vw, 0.78rem);
    --font-sm:      clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem);
    --font-base:    clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
    --font-lg:      clamp(1.10rem, 1.00rem + 0.50vw, 1.30rem);
    --font-xl:      clamp(1.40rem, 1.20rem + 1.00vw, 1.85rem);
    --font-2xl:     clamp(1.80rem, 1.40rem + 2.00vw, 2.60rem);
    --font-3xl:     clamp(2.20rem, 1.60rem + 3.00vw, 3.40rem);
    --font-display: clamp(2.80rem, 1.80rem + 5.00vw, 5.60rem);

    /* ── 空间 scale（4/8 网格） ── */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── 触控目标（iOS HIG 44px / Material 48dp）── */
    --tap-min: 44px;

    /* ── 导航高度 ──
       移动端 60px / PC 80px（与 base.css `padding-top: 80px` 对齐）
       注：base.css 现有 `body { padding-top: 80px }` 不改；移动端用 responsive.css
           覆盖为 60px，以避免污染 PC */
    --nav-h-mobile: 60px;
    --nav-h-desktop: 80px;

    /* ── 内容左右边距（gutter，跟随屏幕缩放） ── */
    --gutter: clamp(1rem, 4vw, 2rem);

    /* ── iOS 安全区 ── */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bot:    env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* ── 圆角 / 阴影（语义化） ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ── z-index 层级（集中管理，避免散落值打架） ── */
    --z-header: 1000;
    --z-academic-panel: 998;
    --z-user-dropdown: 1000;
    --z-mobile-drawer-overlay: 1090;
    --z-mobile-drawer: 1100;
    --z-modal: 1200;
}

/* ════════════════════════════════════════════════════════════════════════
   全局：动画降级（无障碍）
   prefers-reduced-motion: reduce → 关闭一切非必要动画/过渡/平滑滚动
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}