/**
 * 雙主題調色盤（2026-09-14）。
 *
 * 🚨 這裡是全站顏色的唯一來源。tailwind.config.js 把 gray / indigo / red / amber /
 *    emerald / green / white 全部指向這些變數，所以 3440 處 Tailwind class
 *    **不用改一個字**就會跟著主題翻轉。
 *
 * ⚠ 亮色是把深色色階**反轉**：深色拿 gray-900 當底、gray-300 當字；
 *   亮色就讓 gray-900 = 純白卡片、gray-300 = 暖黑文字。底/框/字的語意因此自動成立。
 *
 * ⚠ 值一律寫成「空格分隔的 RGB 通道」，Tailwind 才能套 <alpha-value>
 *   （`bg-gray-800/50` 這種半透明寫法要靠它）。
 *
 * 三段式主題判斷（使用者選擇 > 系統偏好 > 亮色預設）：
 *   :root                                    → 亮色（預設）
 *   @media(dark) :root:not([data-theme=light]) → 沒手動選過就跟隨系統
 *   :root[data-theme=dark]                   → 使用者明確選了夜間
 */

/* ── 亮色：暖米紙色（預設） ───────────────────────────────── */
:root {
    color-scheme: light;

    --c-gray-950: 250 247 242;   /* #FAF7F2 頁面底：暖米白 */
    --c-gray-900: 255 255 255;   /* #FFFFFF 卡片／側欄：純白浮起 */
    --c-gray-800: 237 231 221;   /* #EDE7DD 次級面板／白底上看得見的分隔 */
    --c-gray-700: 221 212 199;   /* #DDD4C7 主要邊框 */
    --c-gray-600: 138 128 114;   /* #8A8072 最弱的提示文字 */
    --c-gray-500: 107 98 89;     /* #6B6259 次要文字 */
    --c-gray-400: 90 82 73;      /* #5A5249 內文（用量最大） */
    --c-gray-300: 58 52 46;      /* #3A342E 強調文字 */
    --c-gray-200: 46 40 35;      /* #2E2823 */
    --c-gray-100: 42 38 34;      /* #2A2622 主文 */
    --c-gray-50:  32 28 25;      /* #201C19 最強 */

    --c-white: 42 38 34;         /* text-white → 主文（778 處靠這個不變成隱形字） */
    --c-card: 255 255 255;       /* 語意化卡片底，不隨 white 反轉 */

    --c-indigo-950: 238 242 255; --c-indigo-900: 224 231 255; --c-indigo-800: 199 210 254;
    --c-indigo-700: 67 56 202;   --c-indigo-600: 79 70 229;   --c-indigo-500: 79 70 229;
    --c-indigo-400: 79 70 229;   --c-indigo-300: 67 56 202;   --c-indigo-200: 67 56 202;
    --c-indigo-100: 55 48 163;   --c-indigo-50: 49 46 129;

    --c-red-950: 254 242 242; --c-red-900: 254 226 226; --c-red-800: 254 202 202;
    --c-red-700: 185 28 28;   --c-red-600: 220 38 38;   --c-red-500: 220 38 38;
    --c-red-400: 220 38 38;   --c-red-300: 185 28 28;   --c-red-200: 153 27 27;
    --c-red-100: 127 29 29;   --c-red-50: 127 29 29;

    --c-amber-950: 255 251 235; --c-amber-900: 254 243 199; --c-amber-800: 253 230 138;
    --c-amber-700: 146 64 14;   --c-amber-600: 180 83 9;    --c-amber-500: 217 119 6;
    --c-amber-400: 217 119 6;   --c-amber-300: 180 83 9;    --c-amber-200: 146 64 14;
    --c-amber-100: 120 53 15;   --c-amber-50: 120 53 15;

    --c-emerald-950: 236 253 245; --c-emerald-900: 209 250 229; --c-emerald-800: 167 243 208;
    --c-emerald-700: 6 95 70;     --c-emerald-600: 4 120 87;    --c-emerald-500: 5 150 105;
    --c-emerald-400: 5 150 105;   --c-emerald-300: 4 120 87;    --c-emerald-200: 6 95 70;
    --c-emerald-100: 6 78 59;     --c-emerald-50: 6 78 59;

    --c-green-950: 240 253 244; --c-green-900: 220 252 231; --c-green-800: 187 247 208;
    --c-green-700: 21 128 61;   --c-green-600: 22 163 74;   --c-green-500: 22 163 74;
    --c-green-400: 22 163 74;   --c-green-300: 21 128 61;   --c-green-200: 22 101 52;
    --c-green-100: 20 83 45;    --c-green-50: 20 83 45;
}

/* ── 夜間：完全等於改版前的樣子 ─────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --c-gray-950: 3 7 18;       --c-gray-900: 17 24 39;     --c-gray-800: 31 41 55;
        --c-gray-700: 55 65 81;     --c-gray-600: 75 85 99;     --c-gray-500: 107 114 128;
        --c-gray-400: 156 163 175;  --c-gray-300: 209 213 219;  --c-gray-200: 229 231 235;
        --c-gray-100: 243 244 246;  --c-gray-50: 249 250 251;

        --c-white: 255 255 255;
        --c-card: 31 41 55;

        --c-indigo-950: 30 27 75;   --c-indigo-900: 49 46 129;  --c-indigo-800: 55 48 163;
        --c-indigo-700: 67 56 202;  --c-indigo-600: 79 70 229;  --c-indigo-500: 99 102 241;
        --c-indigo-400: 129 140 248;--c-indigo-300: 165 180 252;--c-indigo-200: 199 210 254;
        --c-indigo-100: 224 231 255;--c-indigo-50: 238 242 255;

        --c-red-950: 69 10 10;      --c-red-900: 127 29 29;     --c-red-800: 153 27 27;
        --c-red-700: 185 28 28;     --c-red-600: 220 38 38;     --c-red-500: 239 68 68;
        --c-red-400: 248 113 113;   --c-red-300: 252 165 165;   --c-red-200: 254 202 202;
        --c-red-100: 254 226 226;   --c-red-50: 254 242 242;

        --c-amber-950: 69 26 3;     --c-amber-900: 120 53 15;   --c-amber-800: 146 64 14;
        --c-amber-700: 180 83 9;    --c-amber-600: 217 119 6;   --c-amber-500: 245 158 11;
        --c-amber-400: 251 191 36;  --c-amber-300: 252 211 77;  --c-amber-200: 253 230 138;
        --c-amber-100: 254 243 199; --c-amber-50: 255 251 235;

        --c-emerald-950: 2 44 34;   --c-emerald-900: 6 78 59;   --c-emerald-800: 6 95 70;
        --c-emerald-700: 4 120 87;  --c-emerald-600: 5 150 105; --c-emerald-500: 16 185 129;
        --c-emerald-400: 52 211 153;--c-emerald-300: 110 231 183;--c-emerald-200: 167 243 208;
        --c-emerald-100: 209 250 229;--c-emerald-50: 236 253 245;

        --c-green-950: 5 46 22;     --c-green-900: 20 83 45;    --c-green-800: 22 101 52;
        --c-green-700: 21 128 61;   --c-green-600: 22 163 74;   --c-green-500: 34 197 94;
        --c-green-400: 74 222 128;  --c-green-300: 134 239 172; --c-green-200: 187 247 208;
        --c-green-100: 220 252 231; --c-green-50: 240 253 244;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --c-gray-950: 3 7 18;       --c-gray-900: 17 24 39;     --c-gray-800: 31 41 55;
    --c-gray-700: 55 65 81;     --c-gray-600: 75 85 99;     --c-gray-500: 107 114 128;
    --c-gray-400: 156 163 175;  --c-gray-300: 209 213 219;  --c-gray-200: 229 231 235;
    --c-gray-100: 243 244 246;  --c-gray-50: 249 250 251;

    --c-white: 255 255 255;
    --c-card: 31 41 55;

    --c-indigo-950: 30 27 75;   --c-indigo-900: 49 46 129;  --c-indigo-800: 55 48 163;
    --c-indigo-700: 67 56 202;  --c-indigo-600: 79 70 229;  --c-indigo-500: 99 102 241;
    --c-indigo-400: 129 140 248;--c-indigo-300: 165 180 252;--c-indigo-200: 199 210 254;
    --c-indigo-100: 224 231 255;--c-indigo-50: 238 242 255;

    --c-red-950: 69 10 10;      --c-red-900: 127 29 29;     --c-red-800: 153 27 27;
    --c-red-700: 185 28 28;     --c-red-600: 220 38 38;     --c-red-500: 239 68 68;
    --c-red-400: 248 113 113;   --c-red-300: 252 165 165;   --c-red-200: 254 202 202;
    --c-red-100: 254 226 226;   --c-red-50: 254 242 242;

    --c-amber-950: 69 26 3;     --c-amber-900: 120 53 15;   --c-amber-800: 146 64 14;
    --c-amber-700: 180 83 9;    --c-amber-600: 217 119 6;   --c-amber-500: 245 158 11;
    --c-amber-400: 251 191 36;  --c-amber-300: 252 211 77;  --c-amber-200: 253 230 138;
    --c-amber-100: 254 243 199; --c-amber-50: 255 251 235;

    --c-emerald-950: 2 44 34;   --c-emerald-900: 6 78 59;   --c-emerald-800: 6 95 70;
    --c-emerald-700: 4 120 87;  --c-emerald-600: 5 150 105; --c-emerald-500: 16 185 129;
    --c-emerald-400: 52 211 153;--c-emerald-300: 110 231 183;--c-emerald-200: 167 243 208;
    --c-emerald-100: 209 250 229;--c-emerald-50: 236 253 245;

    --c-green-950: 5 46 22;     --c-green-900: 20 83 45;    --c-green-800: 22 101 52;
    --c-green-700: 21 128 61;   --c-green-600: 22 163 74;   --c-green-500: 34 197 94;
    --c-green-400: 74 222 128;  --c-green-300: 134 239 172; --c-green-200: 187 247 208;
    --c-green-100: 220 252 231; --c-green-50: 240 253 244;
}

/* ── 主題切換鈕：亮色時顯示月亮（點了會變暗），夜間顯示太陽 ── */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

/**
 * inline style 專用的便利變數。
 *
 * 站上有 1991 處寫在 `style="..."` 裡的色碼，它們吃不到 Tailwind class，
 * 但可以直接寫 `color: var(--t-gray-400)` 跟著主題走。
 * ⚠ 這些只是把上面的 RGB 通道包成可直接使用的顏色，**不要在這裡放第二套色值** ——
 *   兩份色值遲早會漂。
 */
:root {
    --t-gray-950: rgb(var(--c-gray-950)); --t-gray-900: rgb(var(--c-gray-900));
    --t-gray-800: rgb(var(--c-gray-800)); --t-gray-700: rgb(var(--c-gray-700));
    --t-gray-600: rgb(var(--c-gray-600)); --t-gray-500: rgb(var(--c-gray-500));
    --t-gray-400: rgb(var(--c-gray-400)); --t-gray-300: rgb(var(--c-gray-300));
    --t-gray-200: rgb(var(--c-gray-200)); --t-gray-100: rgb(var(--c-gray-100));
    --t-gray-50:  rgb(var(--c-gray-50));

    --t-indigo-950: rgb(var(--c-indigo-950)); --t-indigo-900: rgb(var(--c-indigo-900));
    --t-indigo-800: rgb(var(--c-indigo-800)); --t-indigo-700: rgb(var(--c-indigo-700));
    --t-indigo-600: rgb(var(--c-indigo-600)); --t-indigo-500: rgb(var(--c-indigo-500));
    --t-indigo-400: rgb(var(--c-indigo-400)); --t-indigo-300: rgb(var(--c-indigo-300));
    --t-indigo-200: rgb(var(--c-indigo-200)); --t-indigo-100: rgb(var(--c-indigo-100));
    --t-indigo-50:  rgb(var(--c-indigo-50));

    --t-red-950: rgb(var(--c-red-950)); --t-red-900: rgb(var(--c-red-900));
    --t-red-800: rgb(var(--c-red-800)); --t-red-700: rgb(var(--c-red-700));
    --t-red-600: rgb(var(--c-red-600)); --t-red-500: rgb(var(--c-red-500));
    --t-red-400: rgb(var(--c-red-400)); --t-red-300: rgb(var(--c-red-300));
    --t-red-200: rgb(var(--c-red-200)); --t-red-100: rgb(var(--c-red-100));
    --t-red-50:  rgb(var(--c-red-50));

    --t-amber-950: rgb(var(--c-amber-950)); --t-amber-900: rgb(var(--c-amber-900));
    --t-amber-800: rgb(var(--c-amber-800)); --t-amber-700: rgb(var(--c-amber-700));
    --t-amber-600: rgb(var(--c-amber-600)); --t-amber-500: rgb(var(--c-amber-500));
    --t-amber-400: rgb(var(--c-amber-400)); --t-amber-300: rgb(var(--c-amber-300));
    --t-amber-200: rgb(var(--c-amber-200)); --t-amber-100: rgb(var(--c-amber-100));
    --t-amber-50:  rgb(var(--c-amber-50));

    --t-emerald-950: rgb(var(--c-emerald-950)); --t-emerald-900: rgb(var(--c-emerald-900));
    --t-emerald-800: rgb(var(--c-emerald-800)); --t-emerald-700: rgb(var(--c-emerald-700));
    --t-emerald-600: rgb(var(--c-emerald-600)); --t-emerald-500: rgb(var(--c-emerald-500));
    --t-emerald-400: rgb(var(--c-emerald-400)); --t-emerald-300: rgb(var(--c-emerald-300));
    --t-emerald-200: rgb(var(--c-emerald-200)); --t-emerald-100: rgb(var(--c-emerald-100));
    --t-emerald-50:  rgb(var(--c-emerald-50));

    --t-green-950: rgb(var(--c-green-950)); --t-green-900: rgb(var(--c-green-900));
    --t-green-800: rgb(var(--c-green-800)); --t-green-700: rgb(var(--c-green-700));
    --t-green-600: rgb(var(--c-green-600)); --t-green-500: rgb(var(--c-green-500));
    --t-green-400: rgb(var(--c-green-400)); --t-green-300: rgb(var(--c-green-300));
    --t-green-200: rgb(var(--c-green-200)); --t-green-100: rgb(var(--c-green-100));
    --t-green-50:  rgb(var(--c-green-50));

    /* 疊在實心強調色上的文字：恆白，不隨主題翻轉 */
    --t-oncolor: #ffffff;
}

/* 半透明疊層：夜間用白色微光，亮色要反過來用黑色微影，否則在紙色底上完全看不見 */
:root { --t-hairline: rgba(0,0,0,0.08); --t-hairline-strong: rgba(0,0,0,0.14); --t-scrim: rgba(0,0,0,0.45); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --t-hairline: rgba(255,255,255,0.05); --t-hairline-strong: rgba(255,255,255,0.12); --t-scrim: rgba(0,0,0,0.7); }
}
:root[data-theme="dark"] { --t-hairline: rgba(255,255,255,0.05); --t-hairline-strong: rgba(255,255,255,0.12); --t-scrim: rgba(0,0,0,0.7); }