/* ==========================================================================
   志愿者管理系统 · 皮肤包（需求 #66）
   十套配色，由 assets/js/app.js 在 <html> 上写 data-skin 生效。

   ★ 这个文件由 .dev-tools/gen_skins.py 生成，请不要手工编辑 ——
     手改会在下次生成时被覆盖。要调配色请改脚本里的 SKINS 表。

   ★ 每套皮肤只覆盖语义变量，不含任何布局或组件规则。
     所以「换皮肤」在 CSS 层面没有任何副作用，只是变量值变了。

   ★ 功能色（成功绿 / 警告黄 / 危险红 / 信息青）十套保持一致：
     它们是语义而不是装饰。只有品牌色、点缀色、侧栏、前台头部随皮肤走。

   站点默认皮肤在后台「系统设置 → 外观皮肤」设置；
   队员可在右上角调色板里自己换，选择存本机浏览器（localStorage）。
   ========================================================================== */


/* ---- 1. 救援蓝 <blue> · Rescue Blue ----
   站点默认配色。沉稳的救援蓝，长时间盯着不累。 */
[data-skin="blue"] {
  --brand:          #1D5FD0;
  --brand-dark:     #123C86;
  --brand-darker:   #0C2A61;
  --brand-light:    #E8F0FE;
  --brand-lighter:  #F3F7FE;
  --brand-mid:      #5CA0FF;
  --brand-border:   #CFE0FA;
  --brand-ink:      #0C2A61;
  --brand-grad:      linear-gradient(140deg, #3D8BFF, #1D5FD0 60%, #123C86);
  --brand-grad-deep: linear-gradient(158deg, #0A2550 0%, #123C86 48%, #1D5FD0 100%);
  --accent:         #FF6A2B;
  --accent-light:   #FFF1EA;
  --accent-ink:     #C24A12;
  --side-bg:        #0E2A5C;
  --side-bg-2:      #0A1F45;
  --side-text:      #DCE6F7;
  --side-text-dim:  #8FAEDC;
  --side-text-3:    #7B9BD0;
  --side-hover:     rgba(255,255,255,.07);
  --side-active-bg: rgba(255,255,255,.14);
  --head-bg:        #123C86;
  --head-text:      #FFFFFF;
  --head-text-dim:  #C3D5EE;
}


/* ---- 2. 暗夜黑 <dark> · Midnight ----
   深色底 + 亮蓝强调。值班室夜里看大屏、长时间盯屏都合适。 */
[data-skin="dark"] {
  --brand:          #4D8DF6;
  --brand-dark:     #3B76D6;
  --brand-darker:   #2A5FB8;
  --brand-light:    #1B2A44;
  --brand-lighter:  #16233A;
  --brand-mid:      #7FB0FF;
  --brand-border:   #2C4266;
  --brand-ink:      #A9C9FF;
  --brand-grad:      linear-gradient(140deg, #2C4E86, #1B3A66 60%, #101C33);
  --brand-grad-deep: linear-gradient(158deg, #0A1322 0%, #14243E 48%, #1E3A66 100%);
  --accent:         #FF8A54;
  --accent-light:   #3A2418;
  --accent-ink:     #FFB48A;
  --side-bg:        #0A111C;
  --side-bg-2:      #070E18;
  --side-text:      #D6DEEC;
  --side-text-dim:  #8C9AAC;
  --side-text-3:    #6E7C8E;
  --side-hover:     rgba(255,255,255,.06);
  --side-active-bg: rgba(93,141,246,.22);
  --head-bg:        #101A28;
  --head-text:      #FFFFFF;
  --head-text-dim:  #A9B4C4;
  --ok:             #35C46E;
  --ok-light:       #16301F;
  --ok-ink:         #6FE0A0;
  --ok-border:      #24583A;
  --warn:           #F0A72E;
  --warn-light:     #33260F;
  --warn-ink:       #FFCF7A;
  --warn-border:    #5C451B;
  --danger:         #F26A6A;
  --danger-dark:    #E05555;
  --danger-light:   #3A1E1E;
  --danger-ink:     #FF9C9C;
  --danger-border:  #5E2C2C;
  --danger-lite:    #2A1818;
  --info:           #3FB6CC;
  --info-light:     #13303A;
  --info-ink:       #7FD8E8;
  --bg:             #0D1420;
  --surface:        #141D2C;
  --surface-2:      #18222F;
  --surface-3:      #1E2836;
  --surface-hover:  #1B2634;
  --border:         #26313F;
  --border-strong:  #35424F;
  --text:           #E8EDF5;
  --text-2:         #A9B4C4;
  --text-3:         #7C8798;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow:     0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.6);

  /* 深色皮肤告诉浏览器「这是暗色界面」，
     否则日期选择器、下拉、滚动条仍按浅色绘制，白底黑字很跳 */
  color-scheme: dark;
}


/* ---- 3. 救援橙 <orange> · Rescue Orange ----
   高可视度的救援橙，适合户外与现场作业时使用。 */
[data-skin="orange"] {
  --brand:          #E2650F;
  --brand-dark:     #B84C08;
  --brand-darker:   #8F3A05;
  --brand-light:    #FDEEE1;
  --brand-lighter:  #FEF6EE;
  --brand-mid:      #F5943F;
  --brand-border:   #F7D3B0;
  --brand-ink:      #8F3A05;
  --brand-grad:      linear-gradient(140deg, #F5943F, #E2650F 60%, #B84C08);
  --brand-grad-deep: linear-gradient(158deg, #7A2F04 0%, #B84C08 48%, #E2650F 100%);
  --accent:         #1D5FD0;
  --accent-light:   #E8F0FE;
  --accent-ink:     #123C86;
  --side-bg:        #5A2A0B;
  --side-bg-2:      #421D06;
  --side-text:      #F7E3D2;
  --side-text-dim:  #D8A87F;
  --side-text-3:    #BE8F6A;
  --side-hover:     rgba(255,255,255,.08);
  --side-active-bg: rgba(255,255,255,.15);
  --head-bg:        #B84C08;
  --head-text:      #FFFFFF;
  --head-text-dim:  #F7D3B0;
}


/* ---- 4. 山林绿 <green> · Forest ----
   山林与野外搜救场景的沉稳绿，久看不刺眼。 */
[data-skin="green"] {
  --brand:          #1B7F53;
  --brand-dark:     #12603D;
  --brand-darker:   #0C462C;
  --brand-light:    #E4F4EC;
  --brand-lighter:  #F1FAF5;
  --brand-mid:      #4FAE7E;
  --brand-border:   #B9E0CC;
  --brand-ink:      #0C462C;
  --brand-grad:      linear-gradient(140deg, #4FAE7E, #1B7F53 60%, #12603D);
  --brand-grad-deep: linear-gradient(158deg, #0A3823 0%, #12603D 48%, #1B7F53 100%);
  --accent:         #E08A00;
  --accent-light:   #FEF4E0;
  --accent-ink:     #A96700;
  --side-bg:        #0C3627;
  --side-bg-2:      #08271C;
  --side-text:      #D8EDE3;
  --side-text-dim:  #8FC4AA;
  --side-text-3:    #74AC92;
  --side-hover:     rgba(255,255,255,.07);
  --side-active-bg: rgba(255,255,255,.14);
  --head-bg:        #12603D;
  --head-text:      #FFFFFF;
  --head-text-dim:  #B9E0CC;
}


/* ---- 5. 深海青 <teal> · Deep Teal ----
   水域救援的深海青，清冷、专注。 */
[data-skin="teal"] {
  --brand:          #0B7C8C;
  --brand-dark:     #075D6A;
  --brand-darker:   #04444E;
  --brand-light:    #E0F3F5;
  --brand-lighter:  #EFF9FA;
  --brand-mid:      #3FA9B8;
  --brand-border:   #B3DDE2;
  --brand-ink:      #04444E;
  --brand-grad:      linear-gradient(140deg, #3FA9B8, #0B7C8C 60%, #075D6A);
  --brand-grad-deep: linear-gradient(158deg, #03343C 0%, #075D6A 48%, #0B7C8C 100%);
  --accent:         #FF6A2B;
  --accent-light:   #FFF1EA;
  --accent-ink:     #C24A12;
  --side-bg:        #06363E;
  --side-bg-2:      #04262C;
  --side-text:      #D3EBEE;
  --side-text-dim:  #84B9C1;
  --side-text-3:    #6AA5AE;
  --side-hover:     rgba(255,255,255,.07);
  --side-active-bg: rgba(255,255,255,.14);
  --head-bg:        #075D6A;
  --head-text:      #FFFFFF;
  --head-text-dim:  #B3DDE2;
}


/* ---- 6. 炙热红 <red> · Blaze ----
   用于应急指挥、救火场景的醒目红。 */
[data-skin="red"] {
  --brand:          #C0302C;
  --brand-dark:     #982220;
  --brand-darker:   #701917;
  --brand-light:    #FBE6E5;
  --brand-lighter:  #FDF2F1;
  --brand-mid:      #E05F5B;
  --brand-border:   #F0C0BE;
  --brand-ink:      #701917;
  --brand-grad:      linear-gradient(140deg, #E05F5B, #C0302C 60%, #982220);
  --brand-grad-deep: linear-gradient(158deg, #591211 0%, #982220 48%, #C0302C 100%);
  --accent:         #E08A00;
  --accent-light:   #FEF4E0;
  --accent-ink:     #A96700;
  --side-bg:        #4C1817;
  --side-bg-2:      #34100F;
  --side-text:      #F5DAD9;
  --side-text-dim:  #D19B99;
  --side-text-3:    #B98583;
  --side-hover:     rgba(255,255,255,.08);
  --side-active-bg: rgba(255,255,255,.15);
  --head-bg:        #982220;
  --head-text:      #FFFFFF;
  --head-text-dim:  #F0C0BE;
}


/* ---- 7. 素纸白 <paper> · Paper ----
   近乎黑白灰的极简配色，适合打印、投屏与正式汇报。 */
[data-skin="paper"] {
  --brand:          #3F4A5A;
  --brand-dark:     #2A323E;
  --brand-darker:   #1B212A;
  --brand-light:    #EEF0F4;
  --brand-lighter:  #F7F8FA;
  --brand-mid:      #6E7B8E;
  --brand-border:   #D8DDE5;
  --brand-ink:      #1B212A;
  --brand-grad:      linear-gradient(140deg, #6E7B8E, #3F4A5A 60%, #2A323E);
  --brand-grad-deep: linear-gradient(158deg, #1B212A 0%, #2A323E 48%, #3F4A5A 100%);
  --accent:         #8A6D3B;
  --accent-light:   #F5EFE4;
  --accent-ink:     #6B5228;
  --side-bg:        #F2F4F7;
  --side-bg-2:      #E8EBF0;
  --side-text:      #2A323E;
  --side-text-dim:  #6B7686;
  --side-text-3:    #8A94A3;
  --side-hover:     rgba(0,0,0,.05);
  --side-active-bg: rgba(0,0,0,.09);
  --head-bg:        #2A323E;
  --head-text:      #FFFFFF;
  --head-text-dim:  #D8DDE5;
}


/* ---- 8. 荣光金 <gold> · Glory Gold ----
   表彰与荣誉场景的金色，适合颁奖、年会与荣誉墙。 */
[data-skin="gold"] {
  --brand:          #A87C1A;
  --brand-dark:     #84600F;
  --brand-darker:   #614608;
  --brand-light:    #FBF1D9;
  --brand-lighter:  #FDF9EE;
  --brand-mid:      #D3A83F;
  --brand-border:   #EBD9A6;
  --brand-ink:      #614608;
  --brand-grad:      linear-gradient(140deg, #D3A83F, #A87C1A 60%, #84600F);
  --brand-grad-deep: linear-gradient(158deg, #4E3806 0%, #84600F 48%, #A87C1A 100%);
  --accent:         #8A3E12;
  --accent-light:   #F7E7DC;
  --accent-ink:     #6B2F0C;
  --side-bg:        #3E2E08;
  --side-bg-2:      #2A1F05;
  --side-text:      #F5EBD4;
  --side-text-dim:  #CBBB92;
  --side-text-3:    #B0A17B;
  --side-hover:     rgba(255,255,255,.08);
  --side-active-bg: rgba(255,255,255,.15);
  --head-bg:        #84600F;
  --head-text:      #FFFFFF;
  --head-text-dim:  #EBD9A6;
}


/* ---- 9. 星夜紫 <purple> · Nebula ----
   夜空紫，年轻、有科技感，适合发布会与招募宣传。 */
[data-skin="purple"] {
  --brand:          #6B45C8;
  --brand-dark:     #5232A0;
  --brand-darker:   #3B2377;
  --brand-light:    #EDE8FA;
  --brand-lighter:  #F6F4FD;
  --brand-mid:      #9273DE;
  --brand-border:   #CFC2F0;
  --brand-ink:      #3B2377;
  --brand-grad:      linear-gradient(140deg, #9273DE, #6B45C8 60%, #5232A0);
  --brand-grad-deep: linear-gradient(158deg, #2E1B5C 0%, #5232A0 48%, #6B45C8 100%);
  --accent:         #FF6A2B;
  --accent-light:   #FFF1EA;
  --accent-ink:     #C24A12;
  --side-bg:        #2A1B52;
  --side-bg-2:      #1D1240;
  --side-text:      #E3DCF7;
  --side-text-dim:  #A493CC;
  --side-text-3:    #8D7CB8;
  --side-hover:     rgba(255,255,255,.08);
  --side-active-bg: rgba(255,255,255,.15);
  --head-bg:        #5232A0;
  --head-text:      #FFFFFF;
  --head-text-dim:  #CFC2F0;
}


/* ---- 10. 石墨灰 <graphite> · Graphite ----
   中性冷灰，专业克制，适合对接政府与企业的汇报场合。 */
[data-skin="graphite"] {
  --brand:          #4A5568;
  --brand-dark:     #374151;
  --brand-darker:   #252B36;
  --brand-light:    #EDF0F4;
  --brand-lighter:  #F6F8FA;
  --brand-mid:      #718096;
  --brand-border:   #CBD3DD;
  --brand-ink:      #252B36;
  --brand-grad:      linear-gradient(140deg, #718096, #4A5568 60%, #374151);
  --brand-grad-deep: linear-gradient(158deg, #1F242C 0%, #374151 48%, #4A5568 100%);
  --accent:         #2B6CB0;
  --accent-light:   #E6F0FA;
  --accent-ink:     #1F4E82;
  --side-bg:        #20252E;
  --side-bg-2:      #161A21;
  --side-text:      #E2E6EC;
  --side-text-dim:  #98A1AF;
  --side-text-3:    #7E8896;
  --side-hover:     rgba(255,255,255,.07);
  --side-active-bg: rgba(255,255,255,.14);
  --head-bg:        #374151;
  --head-text:      #FFFFFF;
  --head-text-dim:  #CBD3DD;
}


/* --------------------------------------------------------------------------
   附：非默认皮肤下的两处必要修正

   皮肤只该改颜色，不该改布局 —— 下面两条是例外，且都改的是「颜色相关的
   可读性」，不是布局：侧栏是深色块（素纸白是浅色），以及在深色皮肤下
   需要给图片加一点点描边，否则浅色照片会糊在背景里。
   -------------------------------------------------------------------------- */

/* 素纸白的侧栏是浅色的，分隔线要反过来才看得见 */
[data-skin="paper"] .nav-group + .nav-group,
[data-skin="paper"] .sidebar-foot { border-color: rgba(0, 0, 0, .08); }

/* 深色皮肤下给缩略图一圈描边，避免浅色图片与深背景糊在一起 */
[data-skin="dark"] .thumb img,
[data-skin="dark"] .lightbox img,
[data-skin="dark"] .vq-shot img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

/* 打印：任何皮肤都必须回到白纸黑字。
   不压这一层，深色皮肤下点「打印」会得到一整页黑底 —— 白耗墨，也不可读。 */
@media print {
  :root, [data-skin] {
    --bg: #FFFFFF !important;
    --surface: #FFFFFF !important;
    --surface-2: #FFFFFF !important;
    --surface-3: #F5F5F5 !important;
    --text: #111111 !important;
    --text-2: #444444 !important;
    --text-3: #666666 !important;
    --border: #DDDDDD !important;
    --border-strong: #BBBBBB !important;
    --side-bg: #FFFFFF !important;
    color-scheme: light !important;
  }
  body { background: #FFFFFF !important; color: #111111 !important; }
}