/*
 * plib 设计令牌 (design tokens)
 * ---------------------------------------------------------------------------
 * 这里是全站唯一的取值来源：颜色、字体、间距、圆角、阴影、动效。
 * 组件样式（system.css）与模板只能引用这些变量，不要再写死十六进制色值。
 *
 * 加载顺序：tailwind (CDN) → tokens.css → system.css
 * 因此本仓库的组件类会覆盖同优先级的 Tailwind 工具类；模板中的 Tailwind 只
 * 负责布局（container / grid / flex / 间距），外观一律交给组件类。
 */

:root {
    /* --- 品牌色：北大红 ---------------------------------------------------- */
    --brand-50: #fdf4f6;
    --brand-100: #f9e5ea;
    --brand-200: #f0c7d1;
    --brand-300: #e09fb0;
    --brand-400: #c26076;
    --brand-500: #a82444;
    --brand-600: #900023; /* 主品牌色 */
    --brand-700: #7a001d;
    --brand-800: #5f0017;
    --brand-900: #470011;

    /* --- 中性色：略带暖灰，让白卡片从画布上自然浮起 -------------------- */
    --neutral-0: #ffffff;
    --neutral-25: #fbfcfd;
    --neutral-50: #f7f8fa;
    --neutral-100: #f1f0ec;
    --neutral-200: #e4e1d9;
    --neutral-300: #cfd6de;
    --neutral-400: #a3adb9;
    /* 500 需在 white / neutral-50 / brand-50 上均达到 AA (≥4.5:1)，
       因为 meta 文本以小字号大量使用它 */
    --neutral-500: #65707c;
    --neutral-600: #57626f;
    --neutral-700: #3f4954;
    --neutral-800: #29313a;
    --neutral-900: #171d24;

    /* --- 语义色：只用于状态，不用于装饰 ------------------------------------ */
    --success-fg: #146c43;
    --success-bg: #e7f5ed;
    --success-border: #a7d8bd;
    --warning-fg: #8a5300;
    --warning-bg: #fdf3e0;
    --warning-border: #eecb92;
    --danger-fg: #b3261e;
    --danger-bg: #fdeceb;
    --danger-border: #f0b4b0;
    --info-fg: #1f5f8b;
    --info-bg: #e9f2f8;
    --info-border: #aecde4;

    /* --- 语义别名：组件只引用这一层 ---------------------------------------- */
    /* 画布用 neutral-100：白卡从微灰画布上浮起来，解决白底卡片区分度问题 */
    --color-bg: var(--neutral-100);
    --color-surface: var(--neutral-0);
    --color-surface-sunken: var(--neutral-50);
    --color-surface-hover: var(--neutral-25);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-text: var(--neutral-900);
    --color-text-secondary: var(--neutral-600);
    --color-text-muted: var(--neutral-500);
    /* 反白文字避免 #fff 纯白，长时间阅读更柔和 */
    --color-text-inverse: #fafbfc;
    --color-accent: var(--brand-600);
    --color-accent-hover: var(--brand-700);
    --color-accent-soft: var(--brand-50);
    --color-accent-soft-border: var(--brand-200);
    --color-btn-primary-bg: var(--brand-600);
    --color-btn-primary-hover: var(--brand-700);
    --color-btn-danger-bg: var(--danger-fg);
    --color-btn-danger-hover: var(--brand-800);
    --color-btn-success-bg: var(--success-fg);
    --color-btn-success-hover: #0f5b38;
    --color-nav-bg: var(--brand-600);
    --color-footer-bg: #29313a;
    --color-footer-text: #a3adb9;
    --color-footer-link: #cfd6de;

    /* --- 字体 --------------------------------------------------------------
     * 中文字形优先级明确，避免落到 Arial 再由系统随机回退中文字体。
     */
    --font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
        "Noto Sans CJK SC", "WenQuanYi Micro Hei", roboto, "Helvetica Neue",
        arial, sans-serif;
    --font-serif: georgia, "Times New Roman", "Songti SC", stsong,
        "Noto Serif SC", simsun, serif;
    --font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas,
        "Liberation Mono", monospace;

    --text-2xs: 0.6875rem; /* 11px 角标 */
    --text-xs: 0.75rem; /* 12px 辅助信息 */
    --text-sm: 0.8125rem; /* 13px 密集元信息 */
    --text-md: 0.875rem; /* 14px 控件、表格 */
    --text-base: 1rem; /* 16px 正文 */
    --text-lg: 1.125rem; /* 18px 小标题 */
    --text-xl: 1.25rem; /* 20px 区块标题 */
    --text-2xl: 1.375rem; /* 22px 页面标题 */
    --text-3xl: 1.75rem; /* 28px 主视觉标题 */

    /* 中文正文需要比西文更松的行距 */
    --leading-tight: 1.35;
    --leading-snug: 1.5;
    --leading-normal: 1.7;
    --leading-relaxed: 1.85;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* --- 间距：4px 基准 ----------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* 区块之间的纵向节奏，全站只用这三档 */
    --rhythm-tight: var(--space-8);
    --rhythm-base: var(--space-12);
    --rhythm-loose: var(--space-16);

    /* --- 圆角 --------------------------------------------------------------- */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 999px;

    /* --- 阴影：统一带一点品牌冷灰，不用纯黑 --------------------------------- */
    --shadow-xs: 0 1px 2px rgba(23, 29, 36, 0.06);
    --shadow-sm: 0 1px 3px rgba(23, 29, 36, 0.08),
        0 1px 2px rgba(23, 29, 36, 0.04);
    --shadow-md: 0 4px 12px rgba(23, 29, 36, 0.08),
        0 1px 3px rgba(23, 29, 36, 0.05);
    --shadow-lg: 0 12px 28px rgba(23, 29, 36, 0.12),
        0 2px 6px rgba(23, 29, 36, 0.06);
    --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.05), 0 4px 14px rgba(71, 0, 17, 0.14);

    /* --- 动效 --------------------------------------------------------------- */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
    --transition-colors: color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);

    /* --- 焦点环：键盘可达性的唯一实现 --------------------------------------- */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--brand-600);

    /* --- 布局 --------------------------------------------------------------- */
    --page-max: 1200px;
    --page-max-narrow: 768px;
    --page-max-form: 480px;
    --nav-height: 60px;
    --z-nav: 50;
    --z-dropdown: 60;
    --z-flash: 70;
    --z-modal: 80;

    /*
     * 分类色板：排行榜院系分布条等需要区分多个类别的场景专用。
     * 装饰性配色只允许取这里的值（配合 system.css 的 .chart-seg--N）。
     */
    --chart-1: #3b82f6;
    --chart-2: #22c55e;
    --chart-3: #f97316;
    --chart-4: #eab308;
    --chart-5: #ef4444;
    --chart-6: #ec4899;
    --chart-7: #8b5cf6;
    --chart-8: #14b8a6;
    --chart-9: #06b6d4;
    --chart-10: #84cc16;
    --chart-11: #f59e0b;
    --chart-12: #94a3b8;

    /* 奖牌（排行榜前三名） */
    --medal-gold: #c8a227;
    --medal-silver: #8d97a3;
    --medal-bronze: #a2703f;

    /* 文件类型图标的识别色（仅作弱提示，不承担语义） */
    --file-pdf: #c0392b;
    --file-word: #2b579a;
    --file-powerpoint: #c55a11;
    --file-excel: #1d7044;
    --file-archive: #7d5ba6;
    --file-dir: #c9a227;

    /* 收藏按钮的激活态 */
    --like-active-border: #e0b23c;
    --like-active-bg: #fdf6e3;
    --like-active-fg: #8a5a00;
    --like-active-icon: #d99e0b;
}

/*
 * 深色主题：只覆写语义别名层（以及被组件直接引用的品牌浅阶），
 * 组件代码零改动即可换肤。切换由 <html data-theme="dark"> 驱动，
 * 未设置时跟随系统 prefers-color-scheme（见 base.html 首屏脚本）。
 */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* 品牌浅阶在深色下变为深色底上的暗红“晕染” */
    --brand-50: #26121a;
    --brand-100: #331821;
    --brand-200: #4f2231;

    --color-bg: #131417;
    --color-surface: #1b1c20;
    --color-surface-sunken: #16171b;
    --color-surface-hover: #212228;
    --color-border: #2c2e35;
    --color-border-strong: #40434c;
    --color-text: #eaebf0;
    --color-text-secondary: #bcc0c8;
    --color-text-muted: #9397a1;
    --color-text-inverse: #f1f2f6;

    /* 文本/链接强调色需要在深底上达到 AA，按钮仍用较深的品牌红 */
    --color-accent: #e0708d;
    --color-accent-hover: #eb8fa6;
    --color-accent-soft: #2a141c;
    --color-accent-soft-border: #573041;
    --color-btn-primary-bg: #a82444;
    --color-btn-primary-hover: #c13a5b;
    --color-btn-danger-bg: #c62f26;
    --color-btn-danger-hover: #d84a41;
    --color-btn-success-bg: #1d7a4c;
    --color-btn-success-hover: #279260;

    /* 导航保持品牌身份，但压深以贴合整体明度 */
    --color-nav-bg: #47101e;

    /* 页脚与画布同温，避免深色下出现石板蓝断层 */
    --color-footer-bg: #191b1f;
    --color-footer-text: #969aa3;
    --color-footer-link: #ccd0d8;

    --success-fg: #74cf9d;
    --success-bg: #132a1d;
    --success-border: #2a5540;
    --warning-fg: #e3b467;
    --warning-bg: #2b2211;
    --warning-border: #5b4519;
    --danger-fg: #f2938b;
    --danger-bg: #331715;
    --danger-border: #66302b;
    --info-fg: #85b8e2;
    --info-bg: #14232f;
    --info-border: #2d4d68;

    /* 中性色低阶在组件里的语义是“浅色填充/发丝线/弱文本”，
       深色下整体压暗并统一为中性炭灰：不偏蓝、不偏褐，让品牌红自己跳出来 */
    --neutral-0: #f1f2f6;
    --neutral-100: #23252b;
    --neutral-200: #2f3138;
    --neutral-300: #4b4e58;
    --neutral-400: #686c78;
    --neutral-700: #d0d3da;

    --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.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.45);
}