/* =========================================================================
   variables.css — 全局设计令牌（唯一权威层）
   -------------------------------------------------------------------------
   加载位置：必须放在 style.css / ref.css / site.css 之后。
             这里的 :root 同特异性但更靠后，因此可以覆盖各文件内部的旧变量定义，
             让已有的一千多处 var(--xxx) 引用**自动跟随新主题**，不必逐个改。

   三层结构：
     第 1 层 原语（色阶）—— 只在这里写死色值，组件不直接使用
     第 2 层 语义（组件认这一层）
     第 3 层 尺度（圆角 / 间距 / 字号 / 阴影 / 布局尺寸）

   回档（改主意时怎么退回玫红）：
     方案 A（推荐，不用改文件）：把 <html> 改成 data-brand="pink"，
             见文件末尾 [data-brand="pink"] 段，整站立刻回到玫红。
     方案 B（彻底还原）：用 _backup/theme-v1.20.58/ 里的三份 css 覆盖回去，
             并删掉本文件与对应的 <link>。
   ========================================================================= */

/* =========================================================================
   1. 第 1 层：原语（色阶）
   ========================================================================= */
:root {
    /* ---------- 品牌蓝（Ant Design 品牌蓝 6 阶） ---------- */
    --blue-1: #e8f3ff;   /* 选中底 / 浅色块 */
    --blue-2: #cfe6ff;   /* 浅描边 */
    --blue-3: #a3ccff;   /* 图标浅色 */
    --blue-5: #4b9bff;   /* hover 浅 */
    --blue-6: #1677ff;   /* 主色 */
    --blue-7: #0958d9;   /* hover 深 / 次级文字 */
    --blue-8: #003eb3;   /* active */

    /* ---------- 中性灰（Arco 灰阶，带一点冷调） ---------- */
    --gray-1: #f5f7fa;   /* 页面底 */
    --gray-2: #f2f3f5;   /* 次级底 / hover 底 */
    --gray-3: #e5e6eb;   /* 常规描边 */
    --gray-4: #c9cdd4;   /* 较深描边 / 禁用 */
    --gray-5: #a9aeb8;
    --gray-6: #86909c;   /* 次要说明 / 时间 / 分组标题 */
    --gray-7: #4e5969;   /* 正文 */
    --gray-8: #1f2329;   /* 标题 */
    --white:  #ffffff;

    /* ---------- 状态色（低饱和：浅底 + 深字，用于 Tag / 提示） ---------- */
    --green-1:  #e8ffea;
    --green-2:  #aff0b5;
    --green-6:  #009a29;

    --orange-1: #fff7e8;
    --orange-2: #ffe4ba;
    --orange-6: #d25f00;

    --red-soft-1: #ffece8;
    --red-soft-2: #fdcdc5;
    --red-soft-6: #cb2634;

    --purple-1: #f5e8ff;
    --purple-6: #722ed1;

    --cyan-1:   #e8f7ff;
    --cyan-6:   #0e7490;

    /* ---------- 品牌色（RGB 分量，供 rgba() 拼透明度用） ---------- */
    /* 注意格式必须是「22, 119, 255」，不能带 rgb() 外壳 */
    --brand-rgb: 22, 119, 255;
    --brand:       #1677ff;
    --brand-hover: #0958d9;
    --brand-active:#003eb3;
    --brand-soft:  #e8f3ff;          /* 选中底（实色） */
    --brand-soft-2:#f2f8ff;          /* 更淡的底 */
    --brand-grad:      linear-gradient(135deg, #4b9bff, #1677ff);
    --brand-grad-hero: linear-gradient(135deg, #7dd3fc, #38bdf8 48%, #1677ff);
}

/* =========================================================================
   2. 第 2 层：语义令牌（新代码只认这一层）
   ========================================================================= */
:root {
    /* 品牌 */
    --c-primary:       var(--brand);
    --c-primary-hover: var(--brand-hover);
    --c-primary-soft:  var(--brand-soft);
    --c-primary-line:  var(--blue-2);

    /* 背景 */
    --c-bg-page:   var(--gray-1);
    --c-bg-card:   var(--white);
    --c-bg-subtle: var(--gray-2);
    --c-bg-hover:  var(--gray-1);
    --c-bg-active: var(--brand-soft);

    /* 文字 */
    --c-text-1: var(--gray-8);   /* 主标题 */
    --c-text-2: var(--gray-7);   /* 正文 */
    --c-text-3: var(--gray-6);   /* 次要说明 / 时间 */
    --c-text-4: var(--gray-5);   /* 占位 / 禁用 */

    /* 描边 */
    --c-border:       var(--gray-3);
    --c-border-light: #f0f1f3;
    --c-border-hover: var(--gray-4);

    /* 状态 */
    --c-success:      var(--green-6);
    --c-success-soft: var(--green-1);
    --c-warning:      var(--orange-6);
    --c-warning-soft: var(--orange-1);
    --c-danger:       var(--red-soft-6);
    --c-danger-soft:  var(--red-soft-1);
    --c-info:         var(--blue-7);
    --c-info-soft:    var(--blue-1);
    --c-neutral:      var(--gray-7);
    --c-neutral-soft: var(--gray-2);
}

/* =========================================================================
   3. 第 3 层：尺度（圆角 / 间距 / 字号 / 阴影 / 布局）
   ========================================================================= */
:root {
    /* 圆角：卡片 8px 上限，避免「圆过头」 */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius:      8px;    /* 兼容 style.css 的 --radius */
    --radius-lg:   10px;   /* 兼容 style.css 的 --radius-lg */
    --radius-pill: 999px;

    /* 间距（4 的倍数） */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* 字号 */
    --font-12: 12px;
    --font-13: 13px;
    --font-14: 14px;
    --font-16: 16px;
    --font-20: 20px;
    --font-28: 28px;

    /* 阴影：极弱弥散，禁止厚重投影 */
    --shadow-1: 0 1px 2px rgba(31, 35, 41, .03);
    --shadow-card: 0 1px 2px rgba(31, 35, 41, .03);
    --shadow-card-hover: 0 4px 12px rgba(31, 35, 41, .06);
    --shadow-pop: 0 6px 20px rgba(31, 35, 41, .10);

    /* 布局尺寸（供布局段与 JS 读取） */
    --topbar-h: 56px;              /* 内容区顶部工具条高度 */
    --sidebar-w: 232px;            /* 侧栏展开宽 */
    --sidebar-w-collapsed: 64px;   /* 侧栏折叠宽 */
    --content-pad-x: 24px;         /* 内容区左右留白 */
    --content-max: 1440px;         /* 内容区最大宽度 */
}

/* =========================================================================
   4. 后台旧名映射（style.css / ref.css 内部一千多处引用自动跟随）
   —— 这些变量名在前台 site.css 里并不使用，改值不会波及前台
   ========================================================================= */
:root {
    /* 主色 */
    --primary:        var(--brand);
    --primary-600:    var(--brand-hover);
    --primary-soft:   var(--brand-soft);
    --on-primary:     #ffffff;

    /* 渐变 / 强调（原为玫红渐变） */
    --violet:         var(--blue-5);
    --violet-600:     var(--brand);
    --violet-soft:    var(--brand-soft-2);
    --ref-tab:        var(--brand);
    --ref-tab-glow:   0 0 9px rgba(var(--brand-rgb), .70);
    --grad-login:     var(--brand-grad-hero);
    --grad-msg:       var(--brand-grad);
    --grad-strong:    var(--brand-grad);

    /* 背景 / 描边：去蓝调，改中性浅灰（云控制台底） */
    --bg:          var(--gray-1);
    --bg-soft:     var(--gray-2);
    --surface:     var(--white);
    --surface-2:   #fafbfc;
    --border:      var(--gray-3);
    --border-soft: var(--c-border-light);

    /* 文字 */
    --text:   var(--gray-8);
    --text-2: var(--gray-7);
    --text-3: var(--gray-6);

    /* 品牌色小工具 */
    --brand-line: rgba(var(--brand-rgb), .22);
    --brand-tint: rgba(var(--brand-rgb), .06);
}

/* =========================================================================
   5. 前台旧名映射（site.css 的 --red 系 → 品牌蓝）
   —— 前台另有 [data-brand="pink"] 回档段（见文末）
   ========================================================================= */
:root {
    --red:     var(--brand);
    --red-rgb: var(--brand-rgb);
    --red-600: var(--brand-hover);
    --red-400: var(--blue-5);
    --red-200: var(--blue-3);
    --red-50:  var(--brand-soft);
    --brand-clr: var(--brand);
    --grad-red: linear-gradient(135deg, var(--brand) 0%, var(--blue-5) 100%);
    --sh-red:   0 6px 18px -6px rgba(var(--brand-rgb), .36);
}

/* =========================================================================
   6. 主题变体：一键回档到玫红（给 <html data-brand="pink">）
   —— 只换品牌色相关变量，其余中性色 / 尺度不变
   —— 用法：admin/_layout.php 或 includes/header.php 的 <html> 上
            加 data-brand="pink" 即可整站回到改版前的玫红
   ========================================================================= */
[data-brand="pink"] {
    --brand-rgb:   243, 18, 96;
    --brand:       #f31260;
    --brand-hover: #c20e4d;
    --brand-active:#a10b3f;
    --brand-soft:  #ffeef1;
    --brand-soft-2:#fff6f8;
    --brand-grad:       linear-gradient(135deg, #ff5c78, #ff2442);
    --brand-grad-hero:  linear-gradient(135deg, #ff8fa3, #ff5c78 48%, #ff2442);

    --blue-1: #ffeef1;
    --blue-2: #ffd6de;
    --blue-3: #f9a0bf;
    --blue-5: #ff6d8f;
    --blue-6: #f31260;
    --blue-7: #c20e4d;
    --blue-8: #a10b3f;

    /* 前台深色 / 次级色也一并回到原粉阶 */
    --red-600: #c20e4d;
    --red-400: #ec4d8b;
    --red-200: #f9a0bf;
    --red-50:  #fee7ef;
    --grad-red: linear-gradient(135deg, #ff2b5e 0%, #ff5c8a 100%);
    --sh-red:   0 6px 18px -6px rgba(243, 18, 96, .36);

    --ref-tab-glow: 0 0 9px rgba(243, 18, 96, .85);
    --violet:      #ff5c78;
    --violet-600:  #ff2442;
    --violet-soft: #fff0f3;
    --grad-login:  linear-gradient(135deg, #ff8fa3, #ff5c78 48%, #ff2442);
    --grad-msg:    linear-gradient(135deg, #ff6f88, #ff2442);
    --grad-strong: linear-gradient(135deg, #ff9aad, #ff2442);
}

/* =========================================================================
   7. 兼容：老浏览器不支持 color-mix 时的兜底
   —— style.css 里用了 color-mix 生成描边色，这里给出等价兜底
   ========================================================================= */
@supports not (color: color-mix(in srgb, red, blue)) {
    :root {
        --success-line: rgba(0, 154, 41, .25);
        --danger-line:  rgba(203, 38, 52, .25);
        --warning-line: rgba(210, 95, 0, .25);
        --info-line:    rgba(var(--brand-rgb), .25);
    }
}

/* =========================================================================
   8. 后台专属令牌（--adm-*）校准
   —— 原定义在 ref.css 的 .admin-wrap 上（29 节），值已经接近云控制台风格，
      这里只做三处对齐：圆角收到 8px 以内、次级文字加深、阴影再压薄。
   —— 选择器同为 .admin-wrap，靠本文件在 ref.css 之后加载取胜。
   ========================================================================= */
.admin-wrap {
    --adm-bg:        var(--gray-1);       /* #f5f7fa */
    --adm-card:      var(--white);
    --adm-line:      var(--gray-3);       /* #e5e6eb，原 #EBEEF5 略紫 */
    --adm-line-2:    var(--c-border-light);
    --adm-text:      var(--gray-8);       /* #1f2329 */
    --adm-text-2:    var(--gray-7);       /* #4e5969，原 #606266 偏灰 */
    --adm-text-3:    var(--gray-6);       /* #86909c，原 #909399 偏紫 */
    --adm-radius:    8px;                 /* 原 12px，收到 8px 内 */
    --adm-radius-sm: 6px;                 /* 原 8px */
    --adm-shadow:    0 1px 2px rgba(31, 35, 41, .03);
    --adm-shadow-h:  0 4px 12px rgba(31, 35, 41, .06);
    --adm-ease:      cubic-bezier(.25, .8, .25, 1);
}