/* ==========================================================================
   縮時森林 GROVYN — 設計系統 Tokens
   來源：碩士聲明 / 設計系統.md
   ========================================================================== */

:root {
  /* ===== 品牌七色 ===== */
  --ts-forest:  #495434;  /* 森林綠 — Primary */
  --ts-navy:    #282C3C;  /* 深林藍 — Primary（替代純黑）*/
  --ts-moss:    #A3AC99;  /* 苔蘚綠 — Primary */
  --ts-sun:     #EEE78D;  /* 晨光黃 — Supportive（< 10% 使用）*/
  --ts-peach:   #EDCDC2;  /* 花瓣粉 — Supportive */
  --ts-warm:    #E8E5DA;  /* 溫米 — Supportive */
  --ts-cream:   #EEEAE7;  /* 米白 — Supportive（替代純白）*/

  /* 衍生階 — alpha / mix */
  --ts-forest-deep:  #2F371F;
  --ts-forest-soft:  rgba(73, 84, 52, 0.12);
  --ts-navy-soft:    rgba(40, 44, 60, 0.08);
  --ts-moss-soft:    rgba(163, 172, 153, 0.18);
  --ts-cream-tint:   #F4F1ED;

  /* 語意對應 */
  --ts-bg:           var(--ts-cream);
  --ts-bg-alt:       var(--ts-warm);
  --ts-surface:      #F8F6F2;
  --ts-fg:           var(--ts-navy);
  --ts-fg-muted:     #5A6172;
  --ts-border:       rgba(40, 44, 60, 0.10);
  --ts-border-strong: rgba(40, 44, 60, 0.22);
  --ts-accent:       var(--ts-forest);
  --ts-accent-warm:  #B96B4D;  /* 萜烯橘 — 衍生暖點綴 */

  /* ===== 字體 ===== */
  --ts-font-serif-zh: "Noto Serif TC", "PingFang TC", "Songti TC", serif;
  --ts-font-sans-zh:  "Noto Sans TC", "PingFang TC", "Heiti TC", system-ui, sans-serif;
  --ts-font-serif-en-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ts-font-serif-en: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ts-font-mono:     "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ===== 字級（森林呼吸式 1.25 scale）===== */
  --ts-text-xs:    12px;
  --ts-text-sm:    14px;
  --ts-text-base:  16px;
  --ts-text-md:    18px;
  --ts-text-lg:    22px;
  --ts-text-xl:    28px;
  --ts-text-2xl:   36px;
  --ts-text-3xl:   48px;
  --ts-text-4xl:   64px;
  --ts-text-5xl:   88px;
  --ts-text-hero:  clamp(56px, 9vw, 120px);

  /* ===== 間距 ===== */
  --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;

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

  /* ===== 陰影 ===== */
  --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-glow: 0 0 0 1px rgba(237, 205, 194, 0.5), 0 10px 40px rgba(237, 205, 194, 0.55);

  /* ===== 動畫 ===== */
  --ts-dur-quick:  180ms;
  --ts-dur-base:   280ms;
  --ts-dur-breath: 520ms;
  --ts-dur-drift:  800ms;
  --ts-ease-natural:  cubic-bezier(0.33, 0.1, 0.25, 1);
  --ts-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== 版面 ===== */
  --ts-container:     1280px;
  --ts-container-wide: 1440px;
  --ts-gutter:        clamp(20px, 4vw, 48px);

  /* ===== Header ===== */
  --ts-header-h:      72px;
}

/* ===== 斷點 helper（給 JS 使用）===== */
:root {
  --ts-bp-mobile: 640px;
  --ts-bp-tablet: 900px;
  --ts-bp-laptop: 1024px;
}

/* ===== Accessibility：減量動畫 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}