/* =====================================================================
   笑笑豆导航 · 统一主题样式（前台 + 后台共用）
   加载顺序：必须在 style.css（前台）/ admin.css（后台）之后加载，
   按 <html data-theme="..."> 覆盖两边的颜色变量实现换肤。

   四套主题：
     dawn  清晨 · 草色新（浅色，嫩绿系）
     day   白昼 · 素雅灰（浅色，默认中性灰，即原前台配色）
     dusk  黄昏 · 暮山暖（浅色，暖调）
     night 夜晚 · 静谧墨（深色，原后台深蓝青系）

   变量分三层：
     1) 前台 legacy 变量：--bg --panel --panel-alt --text --text-2 --text-3
        --border --border-2 --row-divider --sep-bg --sep-border --shadow
     2) 后台 legacy 变量：--adm-bg --adm-panel --adm-panel-strong --adm-border
        --adm-text --adm-muted --adm-primary --adm-secondary --adm-danger --adm-ok
     3) 共享语义 token：--card --card-2 --divider --hover-soft --shadow-pop
        --accent --accent-contrast --accent-soft --accent-focus
        以及后台扩展：--adm-body --adm-chrome --adm-input --adm-panel-head
        --adm-on-primary --adm-primary-hover --adm-primary-soft --adm-row-hover
        --adm-nav-active --adm-danger-contrast
   ===================================================================== */

/* ---------------------------------------------------------------------
   默认 = 白昼（day）：与原前台中性灰一致；未带 data-theme 时也成立
   --------------------------------------------------------------------- */
:root,
[data-theme="day"] {
    /* 前台 legacy */
    --bg:          #eef1f5;
    --panel:       #fafafa;
    --panel-alt:   #f5f5f7;
    --text:        #333333;
    --text-2:      #4d4d4d;
    --text-3:      #888888;
    --border:      #e4e4e4;
    --border-2:    #d7d7d7;
    --row-divider: #ececec;
    --sep-bg:      #e9edf3;
    --sep-border:  #e0e4ea;
    --shadow:      0 0 1px #797979;

    /* 后台 legacy */
    --adm-bg:             #f2f5f9;
    --adm-panel:          #ffffff;
    --adm-panel-strong:   #ffffff;
    --adm-border:         #e3e7ee;
    --adm-text:           #2c3440;
    --adm-muted:          #6b7686;
    --adm-primary:        #0e7490;
    --adm-secondary:      #7c5cd6;
    --adm-danger:         #dc4b4b;
    --adm-ok:             #2fa463;

    /* 共享语义 token */
    --card:            #ffffff;
    --card-2:          #f0f0f0;
    --divider:         #ededed;
    --hover-soft:      rgba(0, 0, 0, .045);
    --shadow-pop:      0 6px 20px rgba(20, 30, 50, .12);
    --accent:          #0e7490;   /* 深青（白昼主题主色，前后台一致） */
    --accent-contrast: #ffffff;
    --accent-soft:     rgba(14, 116, 144, .14);
    --accent-focus:    rgba(14, 116, 144, .15);

    /* 后台扩展 */
    --adm-body:              #eef1f5;
    --adm-chrome:            #fafafa;
    --adm-input:             #f5f7fa;
    --adm-panel-head:        #f5f7fa;
    --adm-on-primary:        #ffffff;
    --adm-primary-hover:     #0c647c;
    --adm-primary-soft:      rgba(14, 116, 144, .10);
    --adm-row-hover:         rgba(14, 116, 144, .06);
    --adm-nav-active:        linear-gradient(90deg, rgba(14, 116, 144, .14), rgba(124, 92, 214, .10));
    --adm-danger-contrast:   #ffffff;
}

/* ---------------------------------------------------------------------
   清晨（dawn）：嫩绿系，呼应节气挂件的春/夏草色
   --------------------------------------------------------------------- */
[data-theme="dawn"] {
    /* 前台 legacy */
    --bg:          #eef3ea;
    --panel:       #fafcf8;
    --panel-alt:   #f3f6ef;
    --text:        #33352f;
    --text-2:      #4f524a;
    --text-3:      #8a8d84;
    --border:      #e2e6dc;
    --border-2:    #d3d9ca;
    --row-divider: #e9ece1;
    --sep-bg:      #e6ecdd;
    --sep-border:  #d8e0cb;
    --shadow:      0 0 1px #8a9282;

    /* 后台 legacy */
    --adm-bg:             #f3f7ef;
    --adm-panel:          #fdfffb;
    --adm-panel-strong:   #fdfffb;
    --adm-border:         #dfe5d6;
    --adm-text:           #2f352c;
    --adm-muted:          #70786a;
    --adm-primary:        #5f8f43;
    --adm-secondary:      #4f8a7b;
    --adm-danger:         #c24b3e;
    --adm-ok:             #4d8f4a;

    /* 共享语义 token */
    --card:            #ffffff;
    --card-2:          #edf2e8;
    --divider:         #e6ead9;
    --hover-soft:      rgba(95, 143, 67, .08);
    --shadow-pop:      0 6px 20px rgba(60, 90, 40, .14);
    --accent:          #5f8f43;   /* 草绿 */
    --accent-contrast: #ffffff;
    --accent-soft:     rgba(168, 198, 108, .22);
    --accent-focus:    rgba(95, 143, 67, .18);

    /* 后台扩展 */
    --adm-body:              #eef3ea;
    --adm-chrome:            #fafcf8;
    --adm-input:             #f4f8f0;
    --adm-panel-head:        #f1f6ec;
    --adm-on-primary:        #ffffff;
    --adm-primary-hover:     #527c3a;
    --adm-primary-soft:      rgba(95, 143, 67, .12);
    --adm-row-hover:         rgba(95, 143, 67, .07);
    --adm-nav-active:        linear-gradient(90deg, rgba(95, 143, 67, .16), rgba(79, 138, 123, .10));
    --adm-danger-contrast:   #ffffff;
}

/* ---------------------------------------------------------------------
   黄昏（dusk）：暖调，呼应节气挂件的丹红
   --------------------------------------------------------------------- */
[data-theme="dusk"] {
    /* 前台 legacy */
    --bg:          #f4ede6;
    --panel:       #fbf6f1;
    --panel-alt:   #f4ede5;
    --text:        #3a322c;
    --text-2:      #564b42;
    --text-3:      #92867c;
    --border:      #e8ddd2;
    --border-2:    #dbcec1;
    --row-divider: #ece1d6;
    --sep-bg:      #f0e4d8;
    --sep-border:  #e4d5c6;
    --shadow:      0 0 1px #97897b;

    /* 后台 legacy */
    --adm-bg:             #f8f2ec;
    --adm-panel:          #fffdfb;
    --adm-panel-strong:   #fffdfb;
    --adm-border:         #eadfd4;
    --adm-text:           #3a322c;
    --adm-muted:          #83756a;
    --adm-primary:        #b5533c;
    --adm-secondary:      #a06b2f;
    --adm-danger:         #c24b3e;
    --adm-ok:             #4d8f4a;

    /* 共享语义 token */
    --card:            #ffffff;
    --card-2:          #f2e9df;
    --divider:         #ecdfcf;
    --hover-soft:      rgba(181, 83, 60, .07);
    --shadow-pop:      0 6px 20px rgba(110, 60, 30, .14);
    --accent:          #b5533c;   /* 丹红 */
    --accent-contrast: #ffffff;
    --accent-soft:     rgba(192, 86, 62, .14);
    --accent-focus:    rgba(181, 83, 60, .16);

    /* 后台扩展 */
    --adm-body:              #f4ede6;
    --adm-chrome:            #fbf6f1;
    --adm-input:             #f7f0e8;
    --adm-panel-head:        #f5ede3;
    --adm-on-primary:        #ffffff;
    --adm-primary-hover:     #a04732;
    --adm-primary-soft:      rgba(181, 83, 60, .10);
    --adm-row-hover:         rgba(181, 83, 60, .06);
    --adm-nav-active:        linear-gradient(90deg, rgba(181, 83, 60, .14), rgba(160, 107, 47, .10));
    --adm-danger-contrast:   #ffffff;
}

/* ---------------------------------------------------------------------
   夜晚（night）：深色，延续原后台深蓝青气质
   --------------------------------------------------------------------- */
[data-theme="night"] {
    /* 前台 legacy */
    --bg:          #12161f;
    --panel:       #1a2029;
    --panel-alt:   #1e2531;
    --text:        #e2e8f0;
    --text-2:      #b9c2cf;
    --text-3:      #7d8794;
    --border:      #2a3240;
    --border-2:    #39424f;
    --row-divider: #252d3a;
    --sep-bg:      #20293a;
    --sep-border:  #2c3545;
    --shadow:      0 0 1px #000000;

    /* 后台 legacy */
    --adm-bg:             #12161f;
    --adm-panel:          rgba(255, 255, 255, .05);
    --adm-panel-strong:   rgba(255, 255, 255, .08);
    --adm-border:         rgba(255, 255, 255, .12);
    --adm-text:           #e2e8f0;
    --adm-muted:          #94a3b8;
    --adm-primary:        #00bcd4;
    --adm-secondary:      #794dff;
    --adm-danger:         #f87171;
    --adm-ok:             #4ade80;

    /* 共享语义 token */
    --card:            #232b38;
    --card-2:          #2c3543;
    --divider:         #323b49;
    --hover-soft:      rgba(255, 255, 255, .06);
    --shadow-pop:      0 6px 24px rgba(0, 0, 0, .5);
    --accent:          #00bcd4;   /* 青（夜晚主题主色） */
    --accent-contrast: #08222b;
    --accent-soft:     rgba(0, 188, 212, .16);
    --accent-focus:    rgba(0, 188, 212, .15);

    /* 后台扩展 */
    --adm-body:              #12161f;
    --adm-chrome:            #1a2029;
    --adm-input:             rgba(0, 0, 0, .25);
    --adm-panel-head:        rgba(255, 255, 255, .03);
    --adm-on-primary:        #08222b;
    --adm-primary-hover:     #00e5ff;
    --adm-primary-soft:      rgba(0, 188, 212, .10);
    --adm-row-hover:         rgba(0, 188, 212, .06);
    --adm-nav-active:        linear-gradient(90deg, rgba(0, 188, 212, .22), rgba(121, 77, 255, .18));
    --adm-danger-contrast:   #2a0b0b;
}

/* ---------------------------------------------------------------------
   夜晚主题下的局部适配（挂件 / 红点 dock 等自带浅色假设的部件）
   --------------------------------------------------------------------- */

/* 二十四节气 · 物候挂件：夜晚换深底浅字，主色仍由 PHP 注入的 --st-accent 控制 */
[data-theme="night"] .st-banner {
    background: #202836;
    border-color: rgba(255, 255, 255, .10);
}
[data-theme="night"] .st-thumb { background: #171d27; }
[data-theme="night"] .st-eyebrow { color: #8f959e; }
[data-theme="night"] .st-eyebrow .st-date { color: #c9c3b8; }
[data-theme="night"] .st-eyebrow i { color: #6d747e; }
[data-theme="night"] .st-title { color: #ece6da; }
[data-theme="night"] .st-poem { color: #b0a999; }

/* 温暖摘录（节气挂件右侧） */
[data-theme="night"] .st-quote { border-left-color: rgba(255, 255, 255, .12); border-top-color: rgba(255, 255, 255, .12); }
[data-theme="night"] .st-quote-text { color: #cfc9bd; }
[data-theme="night"] .st-quote-by { color: #8f8a80; }

/* 红点 dock：hover 文字在深底上提亮 */
[data-theme="night"] .dock-link:hover { color: #ff7080; }

/* 引擎图标：搜索框左按钮本体透明（不加底色）；上方引擎 chips 仍垫白色小垫片保证可读 */
[data-theme="night"] .eng-logo { background: transparent; }
[data-theme="night"] .eng-logo:hover { background: var(--card-2); }
[data-theme="night"] .eng-logo img { background: transparent; }
[data-theme="night"] .engine-chip { background: var(--card); }
[data-theme="night"] .engine-chip img {
    background: #ffffff;
    border-radius: 5px;
    padding: 2px;
    box-sizing: border-box;
}

/* web-group-item 深底下的图标描边弱化 */
[data-theme="night"] .wg-icon { background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
