/* ============================================================
 * 縮時森林 Time-lapse Forest · Design Tokens
 * ------------------------------------------------------------
 * 從主檔 _-Brand-Guidelines.html 抽出的 :root 變數。
 * 用法：把這段 copy 進專案 global CSS 即可全站套用。
 *
 *   <link rel="stylesheet" href="tokens.css">
 *   或
 *   @import url('./tokens.css');
 *
 * 更新時請同步 exports/tailwind.config.js。
 * ============================================================ */

:root {
  /* ----- PRIMARY COLORS ----- */
  --ts-forest: #495434;       /* 森林綠 · 主色 */
  --ts-navy:   #282C3C;       /* 深林藍 · 內文、強對比 */
  --ts-moss:   #A3AC99;       /* 苔蘚綠 · 輔助 */
  --ts-sun:    #EEE78D;       /* 晨光黃 · 強調 */

  /* ----- SUPPORTIVE NEUTRALS ----- */
  --ts-peach:  #EDCDC2;       /* 花瓣粉 · 溫度 */
  --ts-warm:   #E8E5DA;       /* 溫米 · 次底色 */
  --ts-cream:  #EEEAE7;       /* 米白 · 主底色 */

  /* ----- DERIVED / FUNCTIONAL ----- */
  --ts-forest-deep: #2F3721;
  --ts-navy-deep:   #1A1D29;
  --ts-forest-soft: #6B7A54;
  --ts-ink:         #282C3C;
  --ts-ink-soft:    #4A5060;
  --ts-ink-mute:    #5A5F6D; /* WCAG AA: #5A5F6D on #EEEAE7 = 4.96:1 PASS */
  --ts-line:        rgba(40, 44, 60, 0.12);
  --ts-line-soft:   rgba(40, 44, 60, 0.06);
  --ts-bg:          #F5F1EC;
  --ts-bg-warm:     var(--ts-warm);
  --ts-surface:     #FFFFFF;

  /* ----- TYPOGRAPHY ----- */
  --ts-font-serif-zh: 'Noto Serif TC', '思源宋體', 'Songti TC', serif;
  --ts-font-serif-en: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --ts-font-serif-en-display: 'Fraunces', 'Cormorant Garamond', serif;
  --ts-font-sans-zh:  'Noto Sans TC', '思源黑體', 'PingFang TC', sans-serif;
  --ts-font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ----- SPACING (森林呼吸式 scale) ----- */
  --ts-sp-1:   6px;
  --ts-sp-2:  12px;
  --ts-sp-3:  20px;
  --ts-sp-4:  32px;
  --ts-sp-5:  48px;
  --ts-sp-6:  64px;
  --ts-sp-7:  88px;
  --ts-sp-8: 120px;

  /* ----- RADIUS ----- */
  --ts-radius-xs:    2px;
  --ts-radius-sm:    6px;      /* default */
  --ts-radius-md:   12px;
  --ts-radius-lg:   20px;
  --ts-radius-xl:   32px;
  --ts-radius-full: 9999px;

  /* ----- SHADOWS (navy tint · 偏冷墨色，避免商業軟塑膠感) ----- */
  --ts-shadow-xs:   0 1px 2px rgba(40, 44, 60, 0.05);
  --ts-shadow-sm:   0 2px 6px rgba(40, 44, 60, 0.07), 0 1px 2px rgba(40, 44, 60, 0.04);
  --ts-shadow-md:   0 6px 18px rgba(40, 44, 60, 0.10), 0 2px 5px rgba(40, 44, 60, 0.05);
  --ts-shadow-lg:   0 14px 36px rgba(40, 44, 60, 0.14), 0 4px 10px rgba(40, 44, 60, 0.06);
  --ts-shadow-xl:   0 28px 60px rgba(40, 44, 60, 0.22), 0 10px 20px rgba(40, 44, 60, 0.08);
  --ts-shadow-glow: 0 0 0 1px rgba(237, 205, 194, 0.5),
                    0 10px 40px rgba(237, 205, 194, 0.55),
                    0 4px 14px rgba(40, 44, 60, 0.08);

  /* ----- LAYOUT ----- */
  --ts-sidebar-w:   280px;
  --ts-content-max: 960px;

  /* ----- MOTION (品牌建議 scale · 詳見 guidelines/brand-motion.md) ----- */
  --ts-ease-natural:  cubic-bezier(0.33, 0.1, 0.25, 1);   /* 森林自然呼吸曲線 */
  --ts-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);       /* Material 標準曲線（既有使用） */
  --ts-dur-quick:   180ms;   /* hover、tap */
  --ts-dur-base:    280ms;   /* 常規狀態切換 */
  --ts-dur-breath:  520ms;   /* 大型元素展開、modal */
  --ts-dur-drift:   800ms;   /* 呼吸式循環、sidebar 光暈 */

  /* ----- Z-INDEX SCALE (詳見 tokens/breakpoints-and-z-index.md) ----- */
  --ts-z-base:     0;
  --ts-z-raised:   10;
  --ts-z-dropdown: 100;
  --ts-z-sticky:   200;
  --ts-z-overlay:  1000;
  --ts-z-modal:    2000;
  --ts-z-toast:    3000;
  --ts-z-tooltip:  4000;
  --ts-z-max:      9999;
}

/* ----- BREAKPOINTS (CSS @media 不支援 var()，請直接複製這四個值) -----
   ts-mobile   → @media (max-width: 640px)    iPhone 直式
   ts-tablet   → @media (max-width: 900px)    iPad 直式、小筆電（既有主檔用這條）
   ts-laptop   → @media (min-width: 1024px)   MacBook Air / Pro 14"
   ts-desktop  → @media (min-width: 1440px)   大螢幕
   ------------------------------------------------------------ */