/**
 * 灵休 · 液态玻璃设计系统 —— 设计令牌（tokens）
 *
 * 规则（详见 docs/重构/17-液态玻璃界面规范.md）：
 *  1. 页面与组件里的颜色、圆角、阴影、动效一律引用这里的 --lg-* 变量，禁止写死颜色值。
 *  2. 亮色写在 :root，暗色写在 [data-theme="dark"]，新增令牌两种主题必须同时给值。
 *  3. 旧变量（--bg-card、--border、--text-primary 等）在 body.lg 下被映射到本文件令牌，
 *     所以沿用旧类名（card、btn、badge…）的页面无需改动就是玻璃风格。
 *  4. 只有学生端页面带 body.lg；教师端/管理员端不受影响。
 */

:root {
    /* ---------- 品牌色（与旧版 --primary 保持一致，保证品牌连续） ---------- */
    --lg-brand: #10b981;
    --lg-brand-hi: #34d399;
    --lg-brand-lo: #059669;
    --lg-brand-ink: #047857;               /* 浅色底上的品牌文字色，对比度 ≥ 4.5 */

    /* ---------- 语义色 ---------- */
    --lg-info: #3b82f6;
    --lg-warn: #f59e0b;
    --lg-danger: #ef4444;
    --lg-violet: #8b5cf6;

    --lg-brand-soft: rgba(16, 185, 129, 0.16);
    --lg-info-soft: rgba(59, 130, 246, 0.15);
    --lg-warn-soft: rgba(245, 158, 11, 0.18);
    --lg-danger-soft: rgba(239, 68, 68, 0.14);
    --lg-violet-soft: rgba(139, 92, 246, 0.15);

    --lg-warn-ink: #92400e;                /* 浅色底上的语义文字色 */
    --lg-danger-ink: #b91c1c;
    --lg-info-ink: #1d4ed8;
    --lg-violet-ink: #6d28d9;

    /* ---------- 画布与环境光（玻璃后面要有颜色，玻璃才看得出来） ---------- */
    --lg-canvas: #e7efec;
    --lg-blob-1: rgba(52, 211, 153, 0.50);   /* 右上：薄荷绿 */
    --lg-blob-2: rgba(96, 165, 250, 0.38);   /* 左中：天蓝 */
    --lg-blob-3: rgba(251, 191, 36, 0.26);   /* 右下：暖金 */
    --lg-blob-4: rgba(167, 139, 250, 0.30);  /* 左下：淡紫 */

    /* ---------- 文字 ---------- */
    --lg-text: #10231c;
    --lg-text-2: #3a554a;
    --lg-text-3: #5d756b;                    /* 提示/次要说明，仅用于 ≥ 12px */
    --lg-text-on-tint: #ffffff;              /* 品牌色实底上的文字 */

    /* ---------- 内容层表面（卡片等；不使用模糊，便宜且清晰） ---------- */
    --lg-surface: rgba(255, 255, 255, 0.60);
    --lg-surface-hi: rgba(255, 255, 255, 0.82);   /* 弹层、下拉的高不透明表面 */
    --lg-fill: rgba(16, 70, 52, 0.06);            /* 输入框、分段控件、图标底 */
    --lg-fill-2: rgba(16, 70, 52, 0.11);
    --lg-hairline: rgba(16, 70, 52, 0.10);        /* 分隔线 */
    --lg-rim: rgba(255, 255, 255, 0.72);          /* 玻璃外沿高光 */

    /* ---------- 控制层玻璃（顶栏、底部导航、弹层、下拉、Toast） ---------- */
    --lg-glass: linear-gradient(150deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.40));
    --lg-glass-solid: rgba(246, 251, 249, 0.94);  /* 不支持模糊时的回退底色 */
    --lg-blur: blur(22px) saturate(175%);
    --lg-blur-soft: blur(14px) saturate(150%);
    --lg-lens: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
    --lg-scrim: rgba(12, 28, 22, 0.28);           /* 弹窗遮罩（只变暗，不模糊） */

    /* 边缘高光：上亮下暗，模拟玻璃厚度 */
    --lg-edge:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.40);
    --lg-edge-soft:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 0 0 1px rgba(255, 255, 255, 0.30);

    /* ---------- 阴影 ---------- */
    --lg-shadow-1: 0 1px 2px rgba(12, 50, 36, 0.05), 0 6px 18px rgba(12, 50, 36, 0.07);
    --lg-shadow-2: 0 2px 6px rgba(12, 50, 36, 0.08), 0 16px 40px rgba(12, 50, 36, 0.15);
    --lg-shadow-tint: 0 6px 18px rgba(16, 185, 129, 0.34);

    /* ---------- 圆角（同心原则：内圆角 = 外圆角 − 内边距，最小 10px） ---------- */
    --lg-r-xs: 10px;
    --lg-r-sm: 14px;
    --lg-r-md: 18px;
    --lg-r-lg: 24px;
    --lg-r-xl: 30px;
    --lg-r-pill: 999px;

    /* ---------- 间距（4px 栅格） ---------- */
    --lg-s-1: 4px;
    --lg-s-2: 8px;
    --lg-s-3: 12px;
    --lg-s-4: 16px;
    --lg-s-5: 20px;
    --lg-s-6: 24px;

    /* ---------- 字体 ---------- */
    --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
    --lg-fs-large: 28px;
    --lg-fs-title: 22px;
    --lg-fs-head: 17px;
    --lg-fs-body: 15px;
    --lg-fs-call: 14px;
    --lg-fs-foot: 12.5px;
    --lg-fs-cap: 11px;

    /* ---------- 动效 ---------- */
    --lg-ease: cubic-bezier(0.22, 0.9, 0.32, 1);
    --lg-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
    --lg-dur-1: 0.18s;
    --lg-dur-2: 0.32s;
    --lg-dur-3: 0.5s;

    /* ---------- 层级 ---------- */
    --lg-z-header: 800;
    --lg-z-tabbar: 900;
    --lg-z-modal: 1000;
    --lg-z-dropdown: 1100;
    --lg-z-toast: 1200;

    /* ---------- 底部悬浮导航尺寸（页面底部留白与 Toast 位置都依赖它） ---------- */
    --lg-tabbar-h: 64px;
    --lg-tabbar-gap: 12px;
}

/* ==================== 暗色 ==================== */
[data-theme="dark"] {
    --lg-brand-ink: #34d399;
    --lg-brand-soft: rgba(52, 211, 153, 0.18);
    --lg-info-soft: rgba(96, 165, 250, 0.20);
    --lg-warn-soft: rgba(251, 191, 36, 0.20);
    --lg-danger-soft: rgba(248, 113, 113, 0.20);
    --lg-violet-soft: rgba(167, 139, 250, 0.22);

    --lg-warn-ink: #fcd34d;
    --lg-danger-ink: #fca5a5;
    --lg-info-ink: #93c5fd;
    --lg-violet-ink: #c4b5fd;

    --lg-canvas: #08121c;
    --lg-blob-1: rgba(16, 185, 129, 0.42);
    --lg-blob-2: rgba(59, 130, 246, 0.36);
    --lg-blob-3: rgba(139, 92, 246, 0.30);
    --lg-blob-4: rgba(6, 182, 212, 0.26);

    --lg-text: #eef7f3;
    --lg-text-2: rgba(226, 240, 234, 0.80);
    --lg-text-3: rgba(196, 218, 209, 0.62);

    --lg-surface: rgba(40, 58, 74, 0.56);
    --lg-surface-hi: rgba(34, 50, 64, 0.84);
    --lg-fill: rgba(255, 255, 255, 0.07);
    --lg-fill-2: rgba(255, 255, 255, 0.12);
    --lg-hairline: rgba(255, 255, 255, 0.09);
    --lg-rim: rgba(255, 255, 255, 0.16);

    --lg-glass: linear-gradient(150deg, rgba(70, 92, 108, 0.58), rgba(24, 38, 50, 0.46));
    --lg-glass-solid: rgba(22, 34, 46, 0.96);
    --lg-lens: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.10));
    --lg-scrim: rgba(0, 6, 12, 0.50);

    --lg-edge:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    --lg-edge-soft:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);

    --lg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 22px rgba(0, 0, 0, 0.28);
    --lg-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.40), 0 18px 44px rgba(0, 0, 0, 0.45);
    --lg-shadow-tint: 0 6px 20px rgba(16, 185, 129, 0.30);
}

/* ==================== 旧变量映射（让沿用旧类名的页面直接变成玻璃风格） ==================== */
body.lg {
    --bg-main: var(--lg-canvas);
    --bg-card: var(--lg-surface);
    --bg-secondary: var(--lg-fill);
    --bg-tertiary: var(--lg-fill-2);
    --bg-input: var(--lg-fill);
    --bg-hover: var(--lg-fill);
    --text-primary: var(--lg-text);
    --text-secondary: var(--lg-text-2);
    --text-tertiary: var(--lg-text-3);
    --text-input: var(--lg-text);
    --border: var(--lg-hairline);
    --border-input: var(--lg-hairline);

    --primary: var(--lg-brand);
    --primary-dark: var(--lg-brand-lo);
    --primary-light: var(--lg-brand-soft);
    --success: var(--lg-brand);
    --success-light: var(--lg-brand-soft);
    --info: var(--lg-info);
    --info-light: var(--lg-info-soft);
    --warning: var(--lg-warn);
    --warning-light: var(--lg-warn-soft);
    --danger: var(--lg-danger);
    --danger-light: var(--lg-danger-soft);

    --shadow-sm: var(--lg-shadow-1);
    --shadow-md: var(--lg-shadow-1);
    --shadow-lg: var(--lg-shadow-2);

    --radius-sm: var(--lg-r-sm);
    --radius-md: var(--lg-r-md);
    --radius-lg: var(--lg-r-lg);
    --radius-xl: var(--lg-r-xl);

    /* 底部留白 = 悬浮导航高度 + 上下间距 + 安全区域 */
    --tab-bar-height: calc(var(--lg-tabbar-h) + var(--lg-tabbar-gap));

    font-family: var(--lg-font);
    color: var(--lg-text);
}

/* ==================== 环境光背景（静态，不做动画，保证低端机流畅） ==================== */
body.lg {
    background: var(--lg-canvas);
}

body.lg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(520px 440px at 92% -2%, var(--lg-blob-1), transparent 70%),
        radial-gradient(480px 480px at -10% 28%, var(--lg-blob-2), transparent 72%),
        radial-gradient(560px 520px at 106% 64%, var(--lg-blob-3), transparent 70%),
        radial-gradient(540px 440px at 8% 106%, var(--lg-blob-4), transparent 72%),
        var(--lg-canvas);
}

body.lg ::selection {
    background: var(--lg-brand-soft);
}