/* ============================================================
   博山科技 — 設計系統 tokens + 基礎 + 共用元件
   配色 OKLCH(中性色微調向品牌藍,避免純黑白)
   ============================================================ */
:root{
  /* ---- 品牌色 ---- */
  --navy-900: oklch(25% 0.055 264);   /* 最深墨藍 */
  --navy-800: oklch(31% 0.085 264);
  --navy-700: oklch(38% 0.125 264);   /* 前景深藍 */
  --blue-700: oklch(45% 0.165 264);   /* 主色 deep blue */
  --blue-600: oklch(52% 0.195 263);   /* 互動藍 */
  --blue-500: oklch(60% 0.185 258);
  --blue-100: oklch(94% 0.035 255);   /* 藍底淺色 */
  --amber-500: oklch(72% 0.155 64);   /* 琥珀 CTA / 強調 */
  --amber-600: oklch(66% 0.155 58);
  --amber-100: oklch(95% 0.045 80);
  --cyan-500: oklch(72% 0.13 212);    /* 資料青 */
  --teal-500: oklch(72% 0.12 176);    /* 資料 teal */
  --rose-500: oklch(63% 0.20 18);     /* 危險/紅 */
  --green-500: oklch(70% 0.16 155);   /* 成功 */

  /* ---- 中性(微調藍) ---- */
  --ink:      oklch(28% 0.03 262);    /* 主文字 */
  --ink-soft: oklch(44% 0.025 262);   /* 次文字 */
  --muted:    oklch(58% 0.02 262);    /* 弱文字 */
  --line:     oklch(92% 0.012 258);   /* 邊框 */
  --line-soft:oklch(95% 0.008 258);
  --bg:       oklch(98.6% 0.006 258); /* 頁面底 */
  --bg-alt:   oklch(96.5% 0.01 258);  /* 分區底 */
  --surface:  oklch(99.6% 0.002 258); /* 卡片白(微藍) */

  /* ---- 語意 ---- */
  --primary: var(--blue-700);
  --primary-ink: oklch(99% 0.005 258);
  --accent: var(--amber-500);
  --accent-ink: oklch(28% 0.06 60);

  /* ---- 字體 ---- */
  --font-sans: "Fira Sans","Noto Sans TC",system-ui,-apple-system,sans-serif;
  --font-zh:   "Noto Sans TC","Fira Sans",system-ui,sans-serif;
  --font-mono: "Fira Code","SFMono-Regular",ui-monospace,monospace;

  /* ---- 字級(1.25 比例) ---- */
  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.25rem; --t-4xl: 3rem; --t-5xl: 3.75rem;

  /* ---- 間距 ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-8:3rem; --sp-10:4rem; --sp-12:6rem; --sp-16:8rem;

  /* ---- 圓角 / 陰影 ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --shadow-sm: 0 1px 2px oklch(45% 0.1 264 / .06), 0 1px 3px oklch(45% 0.1 264 / .05);
  --shadow-md: 0 4px 12px oklch(45% 0.1 264 / .08), 0 2px 4px oklch(45% 0.1 264 / .04);
  --shadow-lg: 0 18px 40px oklch(40% 0.12 264 / .12), 0 4px 12px oklch(40% 0.1 264 / .06);
  --shadow-blue: 0 14px 30px oklch(52% 0.2 263 / .22);

  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1); /* ease-out-quart 風格 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--t-base); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:lang(zh),h1,h2,h3,.zh{font-family:var(--font-zh)}
h1,h2,h3,h4{line-height:1.18; letter-spacing:-.01em; color:var(--navy-800); margin:0 0 .4em; font-weight:800}
h1{font-size:var(--t-4xl)} h2{font-size:var(--t-3xl)} h3{font-size:var(--t-xl)}
p{margin:0 0 1em; max-width:72ch}
a{color:var(--blue-600); text-decoration:none}
a:hover{color:var(--blue-700)}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:2px; border-radius:4px}
.num{font-family:var(--font-mono); font-feature-settings:"tnum" 1; letter-spacing:-.02em}

/* ---- 容器 ---- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.container-wide{max-width:1360px}

/* ---- 按鈕 ---- */
.btn{
  --b: var(--primary); --bi: var(--primary-ink);
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--font-zh); font-weight:600; font-size:var(--t-sm); line-height:1;
  padding:.85em 1.4em; border-radius:var(--r-md); border:1.5px solid transparent;
  background:var(--b); color:var(--bi); cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), filter .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:var(--t-base); padding:1em 1.7em}
.btn-primary{--bi:oklch(28% 0.075 60); color:oklch(28% 0.075 60);
  background:linear-gradient(135deg, oklch(78% 0.145 78), oklch(70% 0.155 66));
  text-shadow:0 1px 0 oklch(100% 0 0 / .35);
  box-shadow:0 8px 20px oklch(72% 0.15 70 / .38)}
.btn-primary:hover{filter:brightness(.96) saturate(1.04); color:oklch(28% 0.075 60);
  box-shadow:0 14px 28px oklch(70% 0.15 66 / .5)}
.btn-blue{--b:var(--blue-600); --bi:var(--primary-ink)}
.btn-blue:hover{--b:var(--blue-700); color:var(--bi)}
.btn-outline{background:transparent; border-color:var(--line); color:var(--navy-700)}
.btn-outline:hover{border-color:var(--blue-500); color:var(--blue-700); box-shadow:none; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--navy-700); padding:.7em 1em}
.btn-ghost:hover{background:var(--bg-alt); box-shadow:none}
.on-dark .btn-outline{border-color:oklch(100% 0 0 / .28); color:#fff}
.on-dark .btn-outline:hover{border-color:#fff; background:oklch(100% 0 0 / .08)}

/* ---- badge / 標籤 ---- */
.badge{display:inline-flex; align-items:center; gap:.4em; font-size:var(--t-xs); font-weight:600;
  padding:.3em .7em; border-radius:var(--r-full); line-height:1; font-family:var(--font-zh); white-space:nowrap}
.badge-blue{background:var(--blue-100); color:var(--blue-700)}
.badge-amber{background:var(--amber-100); color:var(--amber-600)}
.badge-green{background:oklch(94% 0.06 155); color:oklch(48% 0.12 155)}
.badge-rose{background:oklch(94% 0.05 18); color:oklch(50% 0.18 18)}
.badge-muted{background:var(--bg-alt); color:var(--muted)}
/* 示意資料標記 */
.badge-sample{background:repeating-linear-gradient(135deg,var(--amber-100),var(--amber-100) 6px,oklch(96% 0.03 80) 6px,oklch(96% 0.03 80) 12px);
  color:var(--amber-600); border:1px dashed var(--amber-500)}

.eyebrow{display:inline-block; font-family:var(--font-zh); font-weight:700; font-size:var(--t-sm);
  color:var(--blue-600); letter-spacing:.04em; margin-bottom:.7em}
.eyebrow::before{content:""; display:inline-block; width:1.6em; height:2px; background:var(--accent);
  vertical-align:middle; margin-right:.6em; border-radius:2px}

.section{padding-block:clamp(3.5rem,8vw,6rem)}
.section-alt{background:var(--bg-alt)}
.lead{font-size:var(--t-lg); color:var(--ink-soft); max-width:60ch}
.center{text-align:center}
.center .lead,.center p{margin-inline:auto}

/* 示意資料整頁提示條 */
.sample-note{display:flex; align-items:center; gap:.6em; background:var(--amber-100);
  border:1px dashed var(--amber-500); color:var(--amber-600); border-radius:var(--r-md);
  padding:.7em 1em; font-size:var(--t-sm); font-family:var(--font-zh); margin-bottom:1.4rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}