/* =====================================================================
   壮贝 CMS · 皮肤（多主题）
   ---------------------------------------------------------------------
   前后台共用这一个文件：
     - 前台 H5 布局、后台管理布局都先引入本文件，再引入各自的 h5.css /
       admin.css。两边的设计令牌本就是同一套（--brand / --ink / --bg…），
       所以皮肤定义写一份就够，改配色只需改这里，不会出现「后台换了色
       前台还是绿的」。

   工作原理：
     - :root 里是**默认皮肤（清新青绿）**，数值与改造前完全一致，
       保证升级后老站点视觉不变（这也是回退时的兜底）。
     - 其余皮肤用 html[data-theme="xxx"] 覆盖变量。属性选择器比 :root
       更具体，所以一定会生效。
     - 页面只需在 <html> 上输出 data-theme，例如：
         <html lang="zh-CN" data-theme="rose">
       皮肤名由后台「系统设置 → 外观皮肤」控制（前台、后台可各选一套）。

   皮肤清单（与 app/Support/Theme.php 里的定义保持一致，改一处要同步）：
     浅色：teal(默认) / rose 温柔粉紫 / warm 暖橙童趣 / blue 专业蓝
     深色：tech-dark 科技深蓝 / star-black 星空黑

   深色皮肤的注意点：不能只把 --brand 换掉。--bg / --card / --ink / --line /
   --shadow 以及「深色区」(侧栏、hero、登录页)整组都要反转，否则会出现
   白卡片浮在暗背景上、或者浅色文字压在浅色底上的情况。
   ===================================================================== */

/* ---------------------------------------------------------------------
   默认皮肤：清新青绿（teal）
   --------------------------------------------------------------------- */
:root {
    /* ── 品牌色系 ── */
    --brand:      #12a594;
    --brand-600:  #0e8577;
    --brand-700:  #0b6a5f;
    --brand-50:   #e9f7f5;
    --brand-100:  #ccece7;

    /* ── 强调色（次级按钮 / 提示）── */
    --accent:     #ff8a3d;
    --accent-50:  #fff3e8;
    --accent-fg:  #b35a12;

    /* ── 中性：文字 / 背景 / 边框 ── */
    --ink:        #1b2430;
    --ink-2:      #47536b;
    --muted:      #8892a4;
    --muted-2:    #b7bfcc;
    --line:       #e5e9ef;
    --line-strong:#cdd5e0;
    --line-soft:  #f0f3f7;
    --bg:         #f4f6f9;
    --card:       #ffffff;
    --surface-2:  #fafbfd;
    --surface-3:  #fbfcfe;
    --hover-bg:   #fbfcfd;

    /* ── 语义色 ── */
    --danger:     #e5484d;
    --danger-50:  #fdecec;
    --danger-fg:  #b3252a;
    --danger-line:#f3c9ca;

    --warn:       #f5a524;
    --warn-50:    #fef6e7;
    --warn-fg:    #a8690a;
    --warn-line:  #f5dfb0;

    --ok:         #12a594;
    --ok-50:      #e9f7f5;
    --ok-fg:      #0b6a5f;
    --ok-line:    #b6e3dc;

    --info:       #3b82f6;
    --info-50:    #eaf2fe;
    --info-fg:    #1e50b5;
    --info-line:  #c5dafb;

    /* ── 深色区（后台侧栏 / 前台 hero 与导航 / 登录页）──
       这几个不是品牌主色，而是「品牌色的深色版」，换主题时要跟着走，
       否则粉色皮肤配一个青绿侧栏会很违和。 */
    --deep-from:  #10403c;
    --deep-mid:   #123a3d;
    --deep-to:    #0b2c2a;
    --deep-fg:    #cfe3e0;
    --deep-fg-2:  #9dc4c0;
    --deep-fg-3:  #7fa8a3;
    --deep-fg-4:  #6b928e;
    --deep-hover: rgba(255, 255, 255, .07);

    /* ── 杂项 ── */
    --on-brand:      #ffffff;   /* 铺在品牌色/深色区上的文字 */
    --ph-from:       #1f2d3a;   /* 无图占位块渐变 */
    --ph-to:         #3c4b5c;
    --code-bg:       #f6f8fa;   /* 正文里的代码块 */
    --page-outer-bg: #e9edf2;   /* 前台在桌面浏览器下的页面外底色 */
    --phone-frame:   #1b2430;   /* 后台手机预览的机身色 */
    --scrim:         rgba(20, 27, 36, .82);  /* 图片查看器遮罩 */

    /* ── 阴影（深色主题下要加重，否则卡片没有层次）── */
    --shadow-sm:  0 1px 3px rgba(27, 36, 48, .06);
    --shadow:     0 6px 20px rgba(27, 36, 48, .08);
    --shadow-lg:  0 18px 48px rgba(27, 36, 48, .18);
}

/* ---------------------------------------------------------------------
   温柔粉紫（rose）
   --------------------------------------------------------------------- */
html[data-theme="rose"] {
    --brand:      #d4708f;
    --brand-600:  #b95a78;
    --brand-700:  #9c4863;
    --brand-50:   #fdf1f5;
    --brand-100:  #f8dde7;

    --accent:     #9b7ede;
    --accent-50:  #f4f0fd;
    --accent-fg:  #6a4cb0;

    --deep-from:  #5c2b41;
    --deep-mid:   #4e2437;
    --deep-to:    #3d1c2b;
    --deep-fg:    #f2d6e0;
    --deep-fg-2:  #d9aec0;
    --deep-fg-3:  #b88a9d;
    --deep-fg-4:  #9c7285;

    --ok:         #d4708f;
    --ok-50:      #fdf1f5;
    --ok-fg:      #9c4863;
    --ok-line:    #f0cede;
}

/* ---------------------------------------------------------------------
   暖橙童趣（warm）
   --------------------------------------------------------------------- */
html[data-theme="warm"] {
    --brand:      #f08234;
    --brand-600:  #d96a1c;
    --brand-700:  #b5560f;
    --brand-50:   #fff4ea;
    --brand-100:  #ffe3cc;

    --accent:     #3fa9a0;
    --accent-50:  #e9f7f5;
    --accent-fg:  #1f7a72;

    --deep-from:  #6b3a12;
    --deep-mid:   #5b300e;
    --deep-to:    #47250a;
    --deep-fg:    #f7dcc4;
    --deep-fg-2:  #ddb68c;
    --deep-fg-3:  #bd9268;
    --deep-fg-4:  #9e7850;

    --ok:         #f08234;
    --ok-50:      #fff4ea;
    --ok-fg:      #b5560f;
    --ok-line:    #ffd9b5;
}

/* ---------------------------------------------------------------------
   专业蓝（blue）
   --------------------------------------------------------------------- */
html[data-theme="blue"] {
    --brand:      #2563eb;
    --brand-600:  #1d4ed8;
    --brand-700:  #1e40af;
    --brand-50:   #eff6ff;
    --brand-100:  #dbeafe;

    --accent:     #f59e0b;
    --accent-50:  #fff8e8;
    --accent-fg:  #9a6206;

    --deep-from:  #16305e;
    --deep-mid:   #12294f;
    --deep-to:    #0d1f3d;
    --deep-fg:    #d3e0f7;
    --deep-fg-2:  #a3bdea;
    --deep-fg-3:  #7e9bd0;
    --deep-fg-4:  #647cae;

    --ok:         #2563eb;
    --ok-50:      #eff6ff;
    --ok-fg:      #1e40af;
    --ok-line:    #c3d8fb;
}

/* =====================================================================
   以下为深色皮肤：整组反转，不只是换主色
   ===================================================================== */

/* ---------------------------------------------------------------------
   科技深蓝（tech-dark）—— 深蓝底 + 亮蓝主色
   --------------------------------------------------------------------- */
html[data-theme="tech-dark"] {
    --brand:      #3b82f6;
    --brand-600:  #60a5fa;
    --brand-700:  #93c5fd;
    --brand-50:   #16233c;
    --brand-100:  #1e3054;

    --accent:     #22d3ee;
    --accent-50:  #10303c;
    --accent-fg:  #67e8f9;

    --ink:        #e6eefc;
    --ink-2:      #a8b8d4;
    --muted:      #7184a3;
    --muted-2:    #56657f;
    --line:       #263352;
    --line-strong:#334267;
    --line-soft:  #1d2740;
    --bg:         #0b1220;
    --card:       #151f33;
    --surface-2:  #1a2540;
    --surface-3:  #1e2b49;
    --hover-bg:   #1b2744;

    --danger:     #f87171;
    --danger-50:  #3a2024;
    --danger-fg:  #fca5a5;
    --danger-line:#5c2e34;

    --warn:       #fbbf24;
    --warn-50:    #3a2f16;
    --warn-fg:    #fcd34d;
    --warn-line:  #574524;

    --ok:         #34d399;
    --ok-50:      #123a30;
    --ok-fg:      #6ee7b7;
    --ok-line:    #1d5545;

    --info:       #60a5fa;
    --info-50:    #16294a;
    --info-fg:    #93c5fd;
    --info-line:  #24406e;

    --deep-from:  #0f1b30;
    --deep-mid:   #0d1729;
    --deep-to:    #0a1220;
    --deep-fg:    #c7d6ee;
    --deep-fg-2:  #8fa6c8;
    --deep-fg-3:  #6d80a0;
    --deep-fg-4:  #586a87;
    --deep-hover: rgba(255, 255, 255, .08);

    --on-brand:      #0b1220;   /* 亮蓝按钮上用深字，才够对比 */
    --ph-from:       #1a2540;
    --ph-to:         #24314f;
    --code-bg:       #101a2c;
    --page-outer-bg: #070d18;
    --phone-frame:   #05080f;
    --scrim:         rgba(3, 7, 15, .88);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .45);
    --shadow:     0 6px 20px rgba(0, 0, 0, .5);
    --shadow-lg:  0 18px 48px rgba(0, 0, 0, .65);
}

/* ---------------------------------------------------------------------
   星空黑（star-black）—— 近黑底 + 紫罗兰主色
   --------------------------------------------------------------------- */
html[data-theme="star-black"] {
    --brand:      #a78bfa;
    --brand-600:  #c4b5fd;
    --brand-700:  #ddd6fe;
    --brand-50:   #241f38;
    --brand-100:  #322a4e;

    --accent:     #38bdf8;
    --accent-50:  #12293a;
    --accent-fg:  #7dd3fc;

    --ink:        #ececf1;
    --ink-2:      #b4b4c0;
    --muted:      #7e7e8e;
    --muted-2:    #5c5c6b;
    --line:       #2b2b33;
    --line-strong:#3a3a45;
    --line-soft:  #202027;
    --bg:         #0d0d10;
    --card:       #17171c;
    --surface-2:  #1c1c23;
    --surface-3:  #212129;
    --hover-bg:   #1e1e26;

    --danger:     #f87171;
    --danger-50:  #3a1f22;
    --danger-fg:  #fca5a5;
    --danger-line:#572c31;

    --warn:       #fbbf24;
    --warn-50:    #382c14;
    --warn-fg:    #fcd34d;
    --warn-line:  #524120;

    --ok:         #a78bfa;
    --ok-50:      #241f38;
    --ok-fg:      #c4b5fd;
    --ok-line:    #3d3360;

    --info:       #60a5fa;
    --info-50:    #182742;
    --info-fg:    #93c5fd;
    --info-line:  #263d63;

    --deep-from:  #17171c;
    --deep-mid:   #131318;
    --deep-to:    #0d0d10;
    --deep-fg:    #c9c9d4;
    --deep-fg-2:  #9494a4;
    --deep-fg-3:  #747484;
    --deep-fg-4:  #5e5e6c;
    --deep-hover: rgba(255, 255, 255, .07);

    --on-brand:      #14101f;
    --ph-from:       #1c1c23;
    --ph-to:         #282833;
    --code-bg:       #101015;
    --page-outer-bg: #08080a;
    --phone-frame:   #050506;
    --scrim:         rgba(6, 6, 8, .9);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .5);
    --shadow:     0 6px 20px rgba(0, 0, 0, .55);
    --shadow-lg:  0 18px 48px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------
   赛博霓虹（cyber）—— 近黑底 + 电光青 + 霓虹品红
   撞色对比最强的一套，适合想让人一眼记住的场景。
   注意：这一套只建议前台用。后台整天对着高饱和撞色容易累。
   --------------------------------------------------------------------- */
html[data-theme="cyber"] {
    --brand:      #00d5ff;
    --brand-600:  #5ce1ff;
    --brand-700:  #a5eeff;
    --brand-50:   #0a2233;
    --brand-100:  #103347;

    --accent:     #ff2e97;
    --accent-50:  #33101f;
    --accent-fg:  #ff7ab8;

    --ink:        #e8f2ff;
    --ink-2:      #a8bdd4;
    --muted:      #6b8299;
    --muted-2:    #4d6178;
    --line:       #1d2635;
    --line-strong:#2a3648;
    --line-soft:  #151d29;
    --bg:         #05060a;
    --card:       #0d1017;
    --surface-2:  #131823;
    --surface-3:  #171d2b;
    --hover-bg:   #141a26;

    --danger:     #ff4d6d;
    --danger-50:  #35131c;
    --danger-fg:  #ff8fa3;
    --danger-line:#5c2233;

    --warn:       #ffc233;
    --warn-50:    #332a10;
    --warn-fg:    #ffd873;
    --warn-line:  #57461c;

    --ok:         #00e5a0;
    --ok-50:      #063027;
    --ok-fg:      #5cffc8;
    --ok-line:    #0d5442;

    --info:       #00d5ff;
    --info-50:    #0a2233;
    --info-fg:    #7ae6ff;
    --info-line:  #10485f;

    --deep-from:  #080a12;
    --deep-mid:   #06080e;
    --deep-to:    #030408;
    --deep-fg:    #bfd8ea;
    --deep-fg-2:  #87a4bd;
    --deep-fg-3:  #647f96;
    --deep-fg-4:  #526a80;
    --deep-hover: rgba(255, 255, 255, .08);

    --on-brand:      #04121a;
    --ph-from:       #131823;
    --ph-to:         #1b2433;
    --code-bg:       #0b0f16;
    --page-outer-bg: #020306;
    --phone-frame:   #010204;
    --scrim:         rgba(2, 3, 6, .9);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .5);
    --shadow:     0 6px 20px rgba(0, 0, 0, .55);
    --shadow-lg:  0 18px 48px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------
   极光（aurora）—— 深墨青底 + 极光青绿 + 电光紫
   比 cyber 柔和一档，冷冽但不刺眼。
   --------------------------------------------------------------------- */
html[data-theme="aurora"] {
    --brand:      #2ee6c0;
    --brand-600:  #6df2d4;
    --brand-700:  #a8fae7;
    --brand-50:   #07281f;
    --brand-100:  #0d3b2c;

    --accent:     #7c5cff;
    --accent-50:  #191338;
    --accent-fg:  #a894ff;

    --ink:        #e0f5f2;
    --ink-2:      #a3c8c4;
    --muted:      #6f9490;
    --muted-2:    #4f716e;
    --line:       #1a3540;
    --line-strong:#264653;
    --line-soft:  #112530;
    --bg:         #061418;
    --card:       #0c2029;
    --surface-2:  #112833;
    --surface-3:  #152f3c;
    --hover-bg:   #12292f;

    --danger:     #ff5c7a;
    --danger-50:  #331a24;
    --danger-fg:  #ff9aae;
    --danger-line:#5c2a38;

    --warn:       #ffbe3d;
    --warn-50:    #332a12;
    --warn-fg:    #ffd67a;
    --warn-line:  #57471f;

    --ok:         #2ee6c0;
    --ok-50:      #07281f;
    --ok-fg:      #6df2d4;
    --ok-line:    #0d4a38;

    --info:       #4cc9f0;
    --info-50:    #0a2634;
    --info-fg:    #8adeff;
    --info-line:  #10495f;

    --deep-from:  #08202a;
    --deep-mid:   #061a22;
    --deep-to:    #030f14;
    --deep-fg:    #b8dbd5;
    --deep-fg-2:  #86b3ad;
    --deep-fg-3:  #68928d;
    --deep-fg-4:  #567a76;
    --deep-hover: rgba(255, 255, 255, .08);

    --on-brand:      #04181a;
    --ph-from:       #112833;
    --ph-to:         #17343f;
    --code-bg:       #0a1a20;
    --page-outer-bg: #03090c;
    --phone-frame:   #020608;
    --scrim:         rgba(3, 9, 12, .9);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .45);
    --shadow:     0 6px 20px rgba(0, 0, 0, .5);
    --shadow-lg:  0 18px 48px rgba(0, 0, 0, .65);
}

/* ---------------------------------------------------------------------
   石墨（graphite）—— 深灰底 + 冷银蓝 + 终端绿
   最克制的一套：没有高饱和主色，靠层次和留白撑住，适合长时间看。
   如果觉得其它深色皮肤太花，选这套。
   --------------------------------------------------------------------- */
html[data-theme="graphite"] {
    --brand:      #8ba3bd;
    --brand-600:  #a9bdd3;
    --brand-700:  #c8d6e5;
    --brand-50:   #1c2230;
    --brand-100:  #252d3d;

    --accent:     #4ade80;
    --accent-50:  #0f2a1c;
    --accent-fg:  #86efac;

    --ink:        #e8eaed;
    --ink-2:      #a8adb5;
    --muted:      #71767e;
    --muted-2:    #565a61;
    --line:       #26282e;
    --line-strong:#34373e;
    --line-soft:  #1c1e23;
    --bg:         #0f1012;
    --card:       #191a1e;
    --surface-2:  #1e2025;
    --surface-3:  #23262b;
    --hover-bg:   #202329;

    --danger:     #f87171;
    --danger-50:  #331c1e;
    --danger-fg:  #fca5a5;
    --danger-line:#512c2f;

    --warn:       #fbbf24;
    --warn-50:    #332a14;
    --warn-fg:    #fcd34d;
    --warn-line:  #524322;

    --ok:         #4ade80;
    --ok-50:      #0f2a1c;
    --ok-fg:      #86efac;
    --ok-line:    #1d4a30;

    --info:       #60a5fa;
    --info-50:    #16273f;
    --info-fg:    #93c5fd;
    --info-line:  #26405f;

    --deep-from:  #17181c;
    --deep-mid:   #131418;
    --deep-to:    #0d0e11;
    --deep-fg:    #c8ccd2;
    --deep-fg-2:  #949aa3;
    --deep-fg-3:  #747a83;
    --deep-fg-4:  #5f646c;
    --deep-hover: rgba(255, 255, 255, .07);

    --on-brand:      #14161a;
    --ph-from:       #1e2025;
    --ph-to:         #2a2d33;
    --code-bg:       #131519;
    --page-outer-bg: #08090a;
    --phone-frame:   #050506;
    --scrim:         rgba(6, 7, 9, .9);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .5);
    --shadow:     0 6px 20px rgba(0, 0, 0, .55);
    --shadow-lg:  0 18px 48px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------
   量子紫（quantum）—— 紫黑底 + 电光紫 + 电光青
   与「星空黑」的区别：星空黑是柔紫、偏中性；这套是饱和电光紫 + 青对比，
   更「屏幕发光」的感觉。
   --------------------------------------------------------------------- */
html[data-theme="quantum"] {
    --brand:      #8b5cf6;
    --brand-600:  #a78bfa;
    --brand-700:  #c4b5fd;
    --brand-50:   #1c1338;
    --brand-100:  #271c4d;

    --accent:     #22d3ee;
    --accent-50:  #0a2a33;
    --accent-fg:  #67e8f9;

    --ink:        #ece9fb;
    --ink-2:      #b4aed6;
    --muted:      #7e77a3;
    --muted-2:    #5d5780;
    --line:       #221d38;
    --line-strong:#302a4d;
    --line-soft:  #191430;
    --bg:         #08060f;
    --card:       #12101e;
    --surface-2:  #181527;
    --surface-3:  #1d1a2f;
    --hover-bg:   #1a1729;

    --danger:     #fb7185;
    --danger-50:  #33141d;
    --danger-fg:  #fda4af;
    --danger-line:#572332;

    --warn:       #fbbf24;
    --warn-50:    #332712;
    --warn-fg:    #fcd34d;
    --warn-line:  #52401f;

    --ok:         #34d399;
    --ok-50:      #0a2c24;
    --ok-fg:      #6ee7b7;
    --ok-line:    #124a3c;

    --info:       #22d3ee;
    --info-50:    #0a2a33;
    --info-fg:    #67e8f9;
    --info-line:  #104a58;

    --deep-from:  #16123a;
    --deep-mid:   #100d28;
    --deep-to:    #08060f;
    --deep-fg:    #cfc8f0;
    --deep-fg-2:  #a29ad0;
    --deep-fg-3:  #8079ab;
    --deep-fg-4:  #6b6494;
    --deep-hover: rgba(255, 255, 255, .08);

    --on-brand:      #0d0820;
    --ph-from:       #181527;
    --ph-to:         #22203a;
    --code-bg:       #0d0b18;
    --page-outer-bg: #040308;
    --phone-frame:   #020104;
    --scrim:         rgba(4, 3, 8, .9);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .5);
    --shadow:     0 6px 20px rgba(0, 0, 0, .55);
    --shadow-lg:  0 18px 48px rgba(0, 0, 0, .7);
}