/* ============================================================
   SKH Global Design Tokens
   全站共用設計基礎 — 所有頁面引用此檔案
   建立日期：2026-06-29
   ============================================================ */

/* ─────────────────────────────────────────────
   1. COLOR SYSTEM 色彩系統
   ───────────────────────────────────────────── */
:root {

  /* ── Brand 品牌色 ── */
  --color-brand:           #E37F7F;   /* coral 主色 */
  --color-brand-dark:      #C85A50;   /* hover / 強調 */
  --color-brand-light:     #FFF5F0;   /* 淺背景 */
  --color-brand-mist:      #FEF3F2;   /* 極淺背景 */
  --color-brand-blush:     #EEBDBD;   /* 柔和裝飾 */
  --color-brand-deep:      #d06868;   /* 深強調（少用）*/
  --color-brand-accent:    #FDE8E5;   /* blog 標籤/裝飾背景 */

  /* brand 透明度階梯 */
  --color-brand-a45:       rgba(227, 127, 127, 0.45);
  --color-brand-a40:       rgba(227, 127, 127, 0.40);
  --color-brand-a30:       rgba(227, 127, 127, 0.30);
  --color-brand-a25:       rgba(227, 127, 127, 0.25);
  --color-brand-a20:       rgba(227, 127, 127, 0.20);
  --color-brand-a15:       rgba(227, 127, 127, 0.15);

  /* ── Neutral / Slate 中性色階 ── */
  --color-slate-950:       #0F172A;   /* 最深文字 */
  --color-slate-900:       #1F2937;   /* 標題 */
  --color-slate-800:       #1E293B;   /* 副標題 */
  --color-slate-700:       #334155;   /* 內文主色 */
  --color-slate-600:       #475569;   /* 內文次要 */
  --color-slate-500:       #64748B;   /* 說明文字 */
  --color-slate-400:       #94A3B8;   /* 淡文字 / label */
  --color-slate-300:       #CBD5E1;   /* 邊線 */
  --color-slate-200:       #E2E8F0;   /* 淺邊線 */
  --color-slate-100:       #F1F5F9;   /* 淺背景 / 卡片邊 */
  --color-slate-50:        #F8FAFC;   /* 極淺背景 */

  /* ── Warm 暖色調（dr-ser / stories 用）── */
  --color-warm-900:        #2C2520;
  --color-warm-800:        #3A2C28;
  --color-warm-700:        #4a3d35;
  --color-warm-600:        #5C4D45;
  --color-warm-500:        #7A5A52;
  --color-warm-300:        #C4B299;
  --color-warm-200:        #D4C4B0;
  --color-warm-100:        #E8DDD0;
  --color-warm-bg:         #FAF7F2;
  --color-warm-bg-light:   #FDFBF7;
  --color-warm-bg-card:    #F7F3F0;

  /* warm 透明度 */
  --color-warm-a15:        rgba(58, 44, 40, 0.15);
  --color-warm-a12:        rgba(58, 44, 40, 0.12);
  --color-warm-a08:        rgba(58, 44, 40, 0.08);

  /* ── Semantic 語意色 ── */
  --color-success:         #15803D;
  --color-error:           #BE123C;
  --color-warning:         #F59E0B;
  --color-info:            #FF8C5A;

  /* ── Surface 背景色 ── */
  --color-surface:         #FFFFFF;
  --color-surface-dim:     #FAFAFA;
  --color-surface-muted:   var(--color-slate-50);

  /* ── Overlay ── */
  --color-overlay-light:   rgba(255, 255, 255, 0.5);
  --color-overlay-white-70: rgba(255, 255, 255, 0.7);
  --color-overlay-white-90: rgba(255, 255, 255, 0.9);
  --color-overlay-dark:    rgba(0, 0, 0, 0.08);

  /* ── Social Media ── */
  --color-facebook:        #1877F2;
  --color-instagram:       #E1306C;
  --color-tiktok:          #000000;
  --color-youtube:         #FF0000;
  --color-threads:         #000000;
  --color-line:            #06C755;
  --color-whatsapp:        #25D366;


  /* ─────────────────────────────────────────────
     2. TYPOGRAPHY 字型系統
     ───────────────────────────────────────────── */

  /* ── Font Family ── */
  --font-body:             'Inter', sans-serif;
  --font-display:          'Playfair Display', Georgia, serif;

  /* ── Font Size 字級階梯 ── */
  --text-xs:               0.75rem;    /* 12px */
  --text-sm:               0.875rem;   /* 14px */
  --text-base:             0.9375rem;  /* 15px — 內文預設 */
  --text-md:               1rem;       /* 16px */
  --text-lg:               1.0625rem;  /* 17px */
  --text-xl:               1.125rem;   /* 18px */
  --text-2xl:              1.25rem;    /* 20px */
  --text-3xl:              1.5rem;     /* 24px */
  --text-4xl:              1.875rem;   /* 30px */
  --text-5xl:              2.25rem;    /* 36px */
  --text-6xl:              3rem;       /* 48px */
  --text-7xl:              3.75rem;    /* 60px */

  /* ── Line Height ── */
  --leading-none:          1;
  --leading-tight:         1.1;
  --leading-snug:          1.2;
  --leading-normal:        1.3;
  --leading-relaxed:       1.6;
  --leading-body:          1.7;
  --leading-loose:         1.8;

  /* ── Letter Spacing ── */
  --tracking-tight:        0.01em;
  --tracking-normal:       0.02em;
  --tracking-wide:         0.04em;
  --tracking-wider:        0.05em;
  --tracking-label:        0.15em;
  --tracking-caps:         0.18em;
  --tracking-display:      0.20em;
  --tracking-hero:         0.22em;


  /* ─────────────────────────────────────────────
     3. SPACING 間距系統
     ───────────────────────────────────────────── */

  /* ── Section Rhythm（section 縱向節奏）── */
  --section-py-sm:         3rem;       /* py-12 — 小 section */
  --section-py:            5rem;       /* py-20 — 標準 */
  --section-py-lg:         6rem;       /* py-24 — 較大 */
  --section-py-xl:         8rem;       /* py-32 — hero 等大區塊 */

  /* ── Component Spacing ── */
  --space-xs:              0.25rem;    /* 4px */
  --space-sm:              0.5rem;     /* 8px */
  --space-md:              0.75rem;    /* 12px */
  --space-lg:              1rem;       /* 16px */
  --space-xl:              1.25rem;    /* 20px */
  --space-2xl:             1.5rem;     /* 24px */
  --space-3xl:             2rem;       /* 32px */
  --space-4xl:             2.5rem;     /* 40px */
  --space-5xl:             3rem;       /* 48px */


  /* ─────────────────────────────────────────────
     4. LAYOUT 版面
     ───────────────────────────────────────────── */

  /* ── Container Max Width ── */
  --container-xs:          36rem;      /* 576px — 窄文本 */
  --container-sm:          42rem;      /* 672px — 文章 */
  --container-md:          48rem;      /* 768px — 寬文章 */
  --container-lg:          56rem;      /* 896px */
  --container-xl:          64rem;      /* 1024px */
  --container-2xl:         72rem;      /* 1152px — Tailwind max-w-6xl */
  --container-full:        1200px;     /* 全域最大寬 */
  --container-narrow:      1080px;     /* footer / 次要容器 */

  /* ── Header ── */
  --header-height:         96px;
  --header-height-mobile:  72px;


  /* ─────────────────────────────────────────────
     5. BORDER & SHAPE 圓角與邊線
     ───────────────────────────────────────────── */

  --radius-xs:             3px;
  --radius-sm:             4px;
  --radius-md:             6px;
  --radius-base:           8px;
  --radius-lg:             10px;
  --radius-xl:             12px;
  --radius-2xl:            16px;
  --radius-3xl:            20px;
  --radius-4xl:            24px;
  --radius-section:        1rem;       /* section 內卡片 */
  --radius-card:           1.5rem;     /* 大卡片 */
  --radius-full:           9999px;     /* pill / badge */

  --border-light:          1px solid var(--color-slate-100);
  --border-default:        1px solid var(--color-slate-200);
  --border-brand:          1px solid var(--color-brand-a20);


  /* ─────────────────────────────────────────────
     6. SHADOW 陰影系統
     ───────────────────────────────────────────── */

  --shadow-xs:             0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-sm:             0 4px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-md:             0 12px 36px -8px rgba(15, 23, 42, 0.15);
  --shadow-lg:             0 20px 48px -12px rgba(15, 23, 42, 0.13);
  --shadow-xl:             0 30px 60px -15px rgba(15, 23, 42, 0.25);
  --shadow-card:           0 10px 40px -10px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:     0 20px 50px -12px rgba(0, 0, 0, 0.1);
  --shadow-brand:          0 2px 8px -2px var(--color-brand-a40);
  --shadow-brand-offset:   -4px 6px 16px -4px var(--color-brand-a45);
  --shadow-brand-soft:     0 4px 10px var(--color-brand-a15);
  --shadow-float:          0 4px 20px -4px rgba(0, 0, 0, 0.05);
  --shadow-modal:          0 12px 32px -8px rgba(15, 23, 42, 0.18);
  --shadow-sidebar:        0 -2px 10px rgba(0, 0, 0, 0.15);


  /* ─────────────────────────────────────────────
     7. MOTION 動態
     ───────────────────────────────────────────── */

  --duration-fast:         0.2s;
  --duration-base:         0.25s;
  --duration-slow:         0.3s;
  --duration-slower:       0.4s;

  --ease-default:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:           cubic-bezier(0.2, 0.8, 0.2, 1);

  --transition-fast:       all 0.2s;
  --transition-base:       all 0.25s;
  --transition-slow:       all 0.3s ease;
  --transition-color:      color 0.2s;
  --transition-bg:         background 0.2s;
  --transition-transform:  transform 0.25s;
  --transition-fade:       opacity 0.3s;
}


/* ─────────────────────────────────────────────
   8. BASE RESET & DEFAULTS 基礎設定
   ───────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-slate-700);
  background: var(--color-surface-dim);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.serif-font,
.font-display {
  font-family: var(--font-display);
}


/* ─────────────────────────────────────────────
   9. UTILITY CLASSES 共用工具 class
   ───────────────────────────────────────────── */

/* ── Section Container ── */
.section-container {
  max-width: var(--container-full);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .section-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .section-container { padding-left: 2rem; padding-right: 2rem; }
}

/* ── Section Padding ── */
.section-py    { padding-top: var(--section-py);    padding-bottom: var(--section-py); }
.section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }
.section-py-lg { padding-top: var(--section-py-lg); padding-bottom: var(--section-py-lg); }

/* ── Card Base ── */
.card-base {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: var(--border-light);
  transition: var(--transition-slow);
}

.card-base:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-brand-a20);
}

/* ── Label / Tag ── */
.label-caps {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ── Brand Button ── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-brand:hover {
  background: var(--color-brand-dark);
}