/* ============================================================
   設計 token —— 顏色、間距、圓角、陰影、動態
   顏色沿用舊版手冊的暖色紙感，那是這個專案的視覺身分；
   這裡補上原本缺的層次（elevation / spacing / motion）與深色模式。
   ============================================================ */

:root {
  /* ── 表面（由後到前）── */
  --bg:          #FDF8F0;   /* 頁面底 */
  --surface:     #FFFDF9;   /* 卡片 */
  --surface-2:   #F5EDD8;   /* 次要區塊、表頭 */
  --surface-3:   #EDE0CB;   /* 標籤底 */
  --border:      #D4B896;
  --border-soft: #E6D5B8;

  /* ── 文字 ── */
  --ink:       #2C1F0E;
  --ink-mid:   #5C3D1E;
  --ink-light: #8B6340;
  --on-accent: #FFFFFF;

  /* ── 語意色 ── */
  --green:        #2D6A4F;
  --green-soft:   #E8F5EE;
  --green-border: #B8D8C2;
  --orange:        #C85A1C;
  --orange-soft:   #FBF0E8;
  --orange-border: #EBC3A8;
  --yellow:        #B8860B;
  --yellow-soft:   #FDF6E3;
  --yellow-border: #E8C84A;
  --red:        #B33A3A;
  --red-soft:   #FDECEA;
  --red-border: #F2BFBF;

  /* 主色 = 品牌橘（行動）／綠（完成） */
  --accent:      var(--orange);
  --accent-soft: var(--orange-soft);

  /* ── 間距（8px 基準）── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── 圓角 ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ── 陰影（暖色調的陰影，不用純黑）── */
  --sh-1: 0 1px 2px rgba(44, 31, 14, .06);
  --sh-2: 0 2px 8px rgba(44, 31, 14, .08);
  --sh-3: 0 6px 20px rgba(44, 31, 14, .12);
  --sh-4: 0 12px 34px rgba(44, 31, 14, .18);

  /* ── 動態 ── */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  360ms;

  /* ── 層級 ── */
  --z-nav:   100;
  --z-stuck: 90;
  --z-fab:   200;
  --z-sheet: 300;
  --z-toast: 400;

  /* ── 字體 ── */
  --font-sans:  'Noto Sans TC', -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-serif: 'Noto Serif TC', serif;

  /* ── 版面 ── */
  --content-max: 820px;
  --sidebar-w:   208px;
  --tabbar-h:    58px;

  color-scheme: light;
}

/* ── 深色模式 ──
   保留同一套語意（暖色、紙感），只是換成夜燈下的紙。
   兩條路徑都要寫：系統偏好 + 手動指定，否則切換鈕會失效。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #17120C;
    --surface:     #211A12;
    --surface-2:   #2B2118;
    --surface-3:   #3A2C1F;
    --border:      #4A3826;
    --border-soft: #3A2C1F;

    --ink:       #F2E7D5;
    --ink-mid:   #D3BE9E;
    --ink-light: #A08A6B;

    --green:        #6FCF97;
    --green-soft:   #1B3327;
    --green-border: #2F5C43;
    --orange:        #F0904D;
    --orange-soft:   #3A2415;
    --orange-border: #6B4223;
    --yellow:        #E3B341;
    --yellow-soft:   #332812;
    --yellow-border: #6B5420;
    --red:        #E06C6C;
    --red-soft:   #3A1D1D;
    --red-border: #6B3131;

    --on-accent: #17120C;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 2px 8px rgba(0, 0, 0, .45);
    --sh-3: 0 6px 20px rgba(0, 0, 0, .5);
    --sh-4: 0 12px 34px rgba(0, 0, 0, .6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #17120C;
  --surface:     #211A12;
  --surface-2:   #2B2118;
  --surface-3:   #3A2C1F;
  --border:      #4A3826;
  --border-soft: #3A2C1F;

  --ink:       #F2E7D5;
  --ink-mid:   #D3BE9E;
  --ink-light: #A08A6B;

  --green:        #6FCF97;
  --green-soft:   #1B3327;
  --green-border: #2F5C43;
  --orange:        #F0904D;
  --orange-soft:   #3A2415;
  --orange-border: #6B4223;
  --yellow:        #E3B341;
  --yellow-soft:   #332812;
  --yellow-border: #6B5420;
  --red:        #E06C6C;
  --red-soft:   #3A1D1D;
  --red-border: #6B3131;

  --on-accent: #17120C;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-3: 0 6px 20px rgba(0, 0, 0, .5);
  --sh-4: 0 12px 34px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* 使用者要求減少動態時，全部關掉——廚房裡有人會暈 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 舊類名相容 ──
   舊模板還在用這幾個變數名，先對映過去，之後模板改完可以刪。 */
:root {
  --cream:        var(--bg);
  --paper:        var(--surface-2);
  --tag-bg:       var(--surface-3);
  --green-light:  var(--green-soft);
  --orange-light: var(--orange-soft);
  --yellow-light: var(--yellow-soft);
  --red-light:    var(--red-soft);
}