/* =================================================================
   Design Tokens — 博文血管醫療品牌系統
   來源：pwclinic.tw CSS 提取 + huashu-design 排版推導
   風格：暖色出版物 Warm Editorial（奶油紙底 + 赤陶棕 + 衬線混排）
   ================================================================= */

:root {
  /* ─── 色彩系統（從品牌 CSS 提取，oklch 校準）─── */
  
  /* 品牌核心色 */
  --color-brand: #8d7f74;           /* 暖棕 — 按鈕/CTA/品牌識別 */
  --color-brand-dark: #75645f;      /* 深棕 — hover/連結 */
  --color-heading: #7a4f42;         /* 赤陶棕 — 標題專用 */
  --color-trust: #243673;           /* 醫療信任藍 — 次要 accent */
  
  /* 文字色階 */
  --color-text: #443f3d;            /* 正文（深棕，非純黑，紙感溫暖） */
  --color-text-secondary: #7a7a7a;  /* 次要文字/meta */
  --color-text-light: #9a9090;      /* 輔助說明文字 */
  --color-text-on-dark: #fffffe;    /* 深色底上的文字 */
  
  /* 背景色階（奶茶色系 — 品牌核心識別） */
  --color-bg-page: #f5f0e8;         /* 頁面底色（奶油紙白，比原站 #cabeba 更淺更通用） */
  --color-bg-section: #ece6de;      /* 分區背景（交替用） */
  --color-bg-card: #ffffff;         /* 卡片/內容區（白底浮起） */
  --color-bg-warm: #cabeba;         /* 暖玫瑰灰（原站背景，用於 footer/特殊區） */
  --color-bg-dark: #392f2d;         /* 深巧克力棕（footer/hero overlay） */
  
  /* 邊框/分隔 */
  --color-border: #d9d0c7;          /* 暖灰分隔線 */
  --color-border-light: #e8e2db;    /* 極淡分隔 */
  
  /* 互動狀態 */
  --color-hover: #75645f;           /* hover 深化 */
  --color-focus: #243673;           /* focus ring 用信任藍 */
  --color-cta: #7a4f42;             /* CTA 按鈕底色（赤陶） */
  --color-cta-hover: #5e3a30;       /* CTA hover */
  
  /* ─── 字型系統（huashu-design typography.md 推導）─── */
  
  /* 字體棧 */
  --font-display: 'Noto Serif TC', 'Source Han Serif TC', Georgia, serif;
  --font-body: system-ui, -apple-system, 'Noto Sans TC', 'PingFang TC', sans-serif;
  --font-accent: 'Newsreader', Georgia, serif;  /* 英文出版物質感 */
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  
  /* 字號音階（比例 1.333 純四度，基準 17px）*/
  --text-xs: 0.75rem;     /* 12px — 極小標註 */
  --text-sm: 0.875rem;    /* 14px — 輔助/meta */
  --text-base: 1.0625rem; /* 17px — 中文正文基準 */
  --text-lg: 1.25rem;     /* 20px — 強調段落 */
  --text-xl: 1.5rem;      /* 24px — h4 */
  --text-2xl: 1.875rem;   /* 30px — h3 */
  --text-3xl: 2.5rem;     /* 40px — h2 */
  --text-4xl: 3.25rem;    /* 52px — h1 */
  --text-display: clamp(2.5rem, 1rem + 5vw, 4.5rem); /* Hero 大字 */
  
  /* 字重 */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;
  
  /* 行高 */
  --leading-tight: 1.3;    /* 大標題 */
  --leading-normal: 1.8;   /* 中文正文（寬鬆舒適） */
  --leading-relaxed: 2.0;  /* 長文閱讀 */
  
  /* 行寬限制 */
  --measure-narrow: 28em;  /* 窄欄（sidebar） */
  --measure-normal: 36em;  /* 正文最佳（中文 28-32 字） */
  --measure-wide: 65ch;    /* 英文正文 */
  
  /* ─── 間距系統（4px 基礎）─── */
  
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  
  /* ─── 圓角 ─── */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* ─── 陰影（暖色系，非冷灰）─── */
  
  --shadow-sm: 0 1px 3px rgba(57, 47, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(57, 47, 45, 0.08);
  --shadow-lg: 0 8px 24px rgba(57, 47, 45, 0.10);
  --shadow-xl: 0 16px 48px rgba(57, 47, 45, 0.12);
  
  /* ─── 響應式斷點（參考值，實際用 media query）─── */
  
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  
  /* ─── 容器寬度 ─── */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  
  /* ─── 過渡動畫 ─── */
  
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ─── 暗色區塊覆寫（用於 footer / hero overlay）─── */

[data-theme="dark"] {
  --color-text: #fffffe;
  --color-text-secondary: #cabeba;
  --color-heading: #fffffe;
  --color-bg-page: #392f2d;
  --color-bg-card: #443f3d;
  --color-border: #5a4e4a;
}