/*
 * ============================================================================
 * odi 后台 UI —— 全局基础变量（唯一声明处）
 * ============================================================================
 *
 * 后台只有这 12 个可调变量。新增页面直接写内容就行：
 * 页头、左侧栏、右下角悬浮坞都由模板自动渲染，页面只负责内容区的结构。
 *
 * 常用写法：
 *   .some-title   { font-size: var(--font-lg); color: var(--dark); }
 *   .some-btn     { background: var(--primary); border-radius: var(--radius-pill);
 *                   border: var(--border-width) solid var(--border-color); }
 *   .some-text    { color: var(--primary); }        // 直接当颜色用
 *   .some-card    { background: var(--bg); border-radius: var(--radius);
 *                   border: var(--border-width) solid var(--border-color); }
 *
 * 【规则】
 *   1. 全局变量只在本文件声明。其它样式表、视图内联 <style>、JS 里只能引用。
 *   2. 需要新变量必须先征得用户同意，并且只能加在这里。
 *   3. 不要为「正好差一点点」的场合另起变量 —— 用 color-mix() 从这 12 个派生。
 *   4. 间距、动效、阴影、层级这类固定值直接用字面量，不再做成变量。
 * ============================================================================
 */

:root {
    /* ---- 颜色 ---- */
    --primary: #2563eb;        /* 主色：按钮、链接、选中态 */
    --primary-light: #2f6fe4;  /* 主色亮色：hover / 浅底强调（白字 4.65:1） */
    --dark: #18181b;           /* 暗色：标题与正文 */
    --bg: #ffffff;             /* 背景色：页面与卡片 */

    /* ---- 字体 ---- */
    --font: "Noto Sans SC", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-lg: 19px;           /* 大：页面标题 */
    --font-md: 14px;           /* 中：正文、表单、表格 */
    --font-sm: 12px;           /* 小：说明、辅助信息 */

    /* ---- 形状 ---- */
    --radius: 20px;            /* 圆角：卡片、弹窗、面板 */
    --radius-pill: 999px;      /* 胶囊圆角：按钮、输入框、下拉 */
    --border-width: 1px;       /* 边框宽度 */
    --border-color: #e7e7ea;   /* 边框颜色 */

    /* ------------------------------------------------------------------
     * 语义状态色（固定值，不对用户开放）
     *
     * 它们不是「可调外观」，而是错误 / 成功 / 警告 / 信息的通用语义，
     * 被 toast、表单校验、状态徽标共用。把这四个也做成可调，用户把
     * 「错误」调成绿色之后就没人能分辨对错了。
     * ------------------------------------------------------------------ */
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --success: #047857;
    --success-soft: #ecfdf5;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --info: #0369a1;
    --info-soft: #f0f9ff;
}

/* ============================================================================
 * 暗色：只翻转颜色，字体 / 圆角 / 边框宽度两边共用
 * ========================================================================== */
:root[data-admin-theme="dark"] {
    color-scheme: dark;

    --primary: #2f6fe4;
    --primary-light: #2563eb;
    --dark: #f4f4f5;
    --bg: #18181b;
    --border-color: #303036;

    --danger: #fb7185;
    --danger-soft: #3f1d1d;
    --success: #34d399;
    --success-soft: #12372d;
    --warning: #fbbf24;
    --warning-soft: #3a2913;
    --info: #38bdf8;
    --info-soft: #132f3d;
}