/* ============================================================
   Design Tokens — 蔚禾身心診所
   Source: Figma fileKey Qr2Z6PY52aeLZ004jlwkLJ, dawa spec
   ============================================================ */

:root {
  /* ===== Colors ===== */
  --color-brand-green: #35553B;       /* 主品牌綠 */
  --color-spring-green: #3B6C59;      /* 春綠（次要） */
  --color-bg-light: #F3F2EB;          /* 米色背景 */
  --color-white: #FFFFFF;
  --color-divider-gray: #DADADA;      /* CTA 漸層下色 */

  /* ===== Typography Families ===== */
  --font-serif: 'Noto Serif TC', 'PingFang TC', 'Songti TC', serif;
  --font-sans: 'Noto Sans TC', 'PingFang TC', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ===== Font Sizes — 4 breakpoint responsive
     Source: Figma Token Table（375-768 / 769-1024 / 1025-1440 / 1441+）
     Mobile 375-768 defaults below；@media (min-width) 升級往上對齊
     ============================================================ */
  --fs-h1: 80px;
  --fs-h2: 34px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-h5: 20px;
  --fs-h6: 16px;
  --fs-body: 14px;
  --fs-v-body: 14px;
  --fs-caption: 12px;

  /* ===== Non-responsive sizes（保留固定值） ===== */
  --fs-footer-copy: 12px;
  --fs-footer-link: 13px;
  --fs-cta: 18px;

  --lh-tight: 1.2;

  /* ===== Font Weights ===== */
  /* Noto Sans TC 不支援 350，fallback 為 300 (Light) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ===== Spacing (8px grid) ===== */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 20px;
  --sp-lg: 28px;
  --sp-xl: 40px;
  --sp-2xl: 80px;
  --sp-3xl: 100px;
  --sp-section: 120px;
  --sp-section-lg: 150px;

  /* ===== Radius ===== */
  --r-pill: 16px;
  --r-circle: 999px;

  /* ===== Letter spacing ===== */
  --ls-loose: 1.2px;        /* H5 */
  --ls-medium: 0.96px;      /* H6 / Nav */
  --ls-tight: 0.24px;       /* H1 */
  --ls-caption: 0.12px;     /* Footer copy */
  --ls-tiny: 0.14px;        /* Caption */

  /* ===== Shadows ===== */
  --shadow-text-soft: 0px 4px 5px rgba(0, 0, 0, 0.08);
  --shadow-meta-soft: 0px 2px 2px rgba(0, 0, 0, 0.08);

  /* ===== Layout ===== */
  --max-w-content: 1240px;
  --max-w-content-lg: 1280px;

  /* ===== Z-index ===== */
  --z-nav: 100;
  --z-back-to-top: 50;

  /* ===== Motion ===== */
  --motion-duration-fast: 0.3s;
  --motion-duration-base: 0.5s;
  --motion-duration-slow: 0.9s;
  --motion-duration-page: 1.2s;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);  /* smooth ease-out */
}

/* ============================================================
   Font Size Breakpoints — Tablet 769-1024
   ============================================================ */
@media (min-width: 769px) {
  :root {
    --fs-h1: 88px;
    --fs-h2: 40px;
    --fs-h3: 36px;
    --fs-h4: 22px;
    --fs-h5: 22px;
    --fs-h6: 16px;
    --fs-body: 16px;
    --fs-v-body: 16px;
    --fs-caption: 12px;
  }
}

/* ============================================================
   Font Size Breakpoints — Base Desktop 1025-1440
   ============================================================ */
@media (min-width: 1025px) {
  :root {
    --fs-h1: 96px;
    --fs-h2: 52px;
    --fs-h3: 44px;
    --fs-h4: 26px;
    --fs-h5: 24px;
    --fs-h6: 17px;
    --fs-body: 16px;
    --fs-v-body: 16px;
    --fs-caption: 13px;
  }
}

/* ============================================================
   Font Size Breakpoints — Wide Desktop 1441+
   ============================================================ */
@media (min-width: 1441px) {
  :root {
    --fs-h1: 104px;
    --fs-h2: 58px;
    --fs-h3: 52px;
    --fs-h4: 32px;
    --fs-h5: 26px;
    --fs-h6: 18px;
    --fs-body: 17px;
    --fs-v-body: 17px;
    --fs-caption: 14px;
  }
}