/* assets/css/theme_warm_sketchbook.css
   [全站改版] 暖色系手繪筆記本風格——全站唯一一套設計token（色彩/字型/圓角/陰影）。

   使用規則（重要，避免組錯對比度）：
   - --accent-*（淺色版）：當背景用，上面疊 var(--text-primary) 深色文字。
   - --accent-*-deep（深色版，2026-09第二輪加深過）：兩種用法都經過WCAG AA驗證——
       (a) 當「文字顏色」直接用在 --bg-base/--bg-paper/--bg-paper-deep 這三層淺色背景的
           任何一層上（例如強調色的連結、標題）——第一輪的值只驗過bg-base/bg-paper，
           對--bg-paper-deep只有3.8~4.1，是FAIL，這輪已加深到全部三層都≥4.5；
       (b) 當「背景填色」時，上面要疊「白色」文字，不是深色文字（加深後白字對比度5.97~6.17，更安全）。
     絕對不要把 --accent-*-deep 當背景、又疊 --text-primary 深色文字上去——兩個都偏暗，
     對比度只有2.3~2.4，這個組合已經算過、明確不能用。
   - 所有色票對比度都用實際WCAG公式算過（見這次改版的驗證紀錄），不是憑肉眼調的。

   每個頁面自己的 :root 不會改變數「名稱」，只會把值指到這裡對應的token——
   這樣頁面裡原本上百處 var(--primary) 之類的既有引用完全不用動。
*/
:root {
    /* ===== 背景（暖米色，三層深度） ===== */
    --bg-base: #F7F2E9;
    --bg-paper: #F1EADC;
    --bg-paper-deep: #E9DFCC;

    /* ===== 輔色：淺版當背景（配深色文字），深版當文字或當背景（配白色文字） ===== */
    --accent-coral: #E8A87C;
    --accent-coral-deep: #7D5B43;
    --accent-blue: #8FA9B5;
    --accent-blue-deep: #55656B;
    --accent-mustard: #E4C77C;
    --accent-mustard-deep: #71623E;
    --accent-sage: #A8B89A;
    --accent-sage-deep: #5C6454;

    /* ===== 語意色（沿用暖色調性，不是鮮豔紅/綠） ===== */
    --success: #5C6454;   /* = accent-sage-deep，跟success語意搭配用 */
    --warning: #71623E;   /* = accent-mustard-deep */
    --danger:  #9D483C;   /* 磚紅，已加深到對bg-base/bg-paper/bg-paper-deep三層都過AA(4.5+) */

    /* ===== 文字 ===== */
    --text-primary: #3A342C;
    --text-secondary: #6B6255;

    /* ===== 邊框／陰影（暖墨色取代灰階） ===== */
    --border-ink: rgba(58,52,44,0.16);
    --shadow-sm: 0 1px 3px rgba(58,52,44,0.08);
    --shadow-md: 0 4px 14px rgba(58,52,44,0.10);
    --shadow-lg: 0 10px 28px rgba(58,52,44,0.14);
    --border-hand: 1.5px solid rgba(58,52,44,0.22); /* 手繪感邊框，取代部分陰影用 */

    /* ===== 圓角尺度 ===== [收斂改版] 原本sm/md/lg是10/16/22px，且大卡片還故意配上
       每個角不一樣的「不規則圓角」想營造手繪感，結果全站688處圓角疊在一起看起來
       又大又雜，反而是最像「AI生成網頁」的地方。改成統一收斂：整體调小一級，
       organic-a/b不再各角不同，直接對齊radius-lg，跟其他大卡片圓角完全一致。 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-organic-a: var(--radius-lg);
    --radius-organic-b: var(--radius-lg);

    /* ===== 字型 ===== */
    --font-heading-latin: 'Fredoka', sans-serif;
    --font-heading-cjk: 'Noto Serif TC', serif;
    --font-body: 'Noto Sans TC', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* ===== 紙紋理（極淡雜訊，只定義一次給下面body規則跟.paper-texture-bg共用） ===== */
    --paper-texture-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* 站台級紙紋理：直接掛在body上，用!important只鎖background-image這一個子屬性——
   這樣不管個別頁面自己的body規則用shorthand `background:...`重設過，或是
   theme_manager.js用JS inline style改body.style.background，紋理都不會被蓋掉
   （!important的外部樣式規則層級高於非important的inline style，這是唯一能
   同時擋住兩種來源覆寫、又不用去改15個頁面各自body規則或theme_manager.js的辦法）。
   只設background-image/repeat，不動background-color，所以完全不影響各頁面自訂的底色。 */
body {
    background-image: var(--paper-texture-image) !important;
    background-repeat: repeat !important;
}

/* 標題共用class：中英文分別交給對應字型負責，同一個標題元素裡中英文字元
   會自動各自吃到正確的字型，不需要特別拆分markup。 */
.font-heading, h1, h2, h3 {
    font-family: var(--font-heading-latin), var(--font-heading-cjk);
}

/* 極輕量紙紋理：只疊在body背景，不是每個卡片都疊一層——用CSS產生的雜訊，
   不需要額外圖檔。透明度控制在3%左右，肉眼幾乎不會直接注意到，只是讓大片
   純色背景不會顯得太平。 */
.paper-texture-bg {
    background-color: var(--bg-base);
    background-image: var(--paper-texture-image);
}

/* 重複性小卡片網格的「手工排列感」——輕微交替旋轉，角度控制在0.5度以內，
   看得出不是機器排的，但不影響閱讀跟點擊熱區。套用方式：容器內的卡片
   統一加上 .organic-tilt class。 */
.organic-tilt:nth-child(odd) { transform: rotate(-0.4deg); }
.organic-tilt:nth-child(even) { transform: rotate(0.3deg); }
.organic-tilt:hover { transform: rotate(0deg) translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .organic-tilt, .organic-tilt:hover { transform: none; transition: none; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}