/* tokens.css — 共享 primitive 層（三主題同源，取自 docs/BRAND.md + DESIGN.md §4.1）
   語義層（--color-bg 等）由各主題 css 覆寫。 */

:root {
  /* 品牌 primitive（原站取色，禁改值） */
  --blue:   #0D67A0;   /* Logo 藍 —— A/C 主強調 */
  --gold:   #C59952;   /* Logo 金 —— 高亮/引注 */
  --mint:   #23CE9A;   /* 原站 hover/active —— 次強調、選中態 */
  --cyan:   #2CA5C4;   /* 原站視頻 skin —— 視頻元素 */
  --aub:    #322E43;   /* 原站頁腳深紫灰 */
  --ink:    #1F2326;
  --paper:  #FFFFFF;

  /* 中性階 */
  --grey-100: #F5F8F9;
  --grey-300: #E4E9EA;
  --grey-500: #8B9298;

  /* 間距階（4·8·12·16·24·32·48·64·96）—— 內部間距務必 ≤ 外部間距 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* 圓角：input 4 / button 6 / card 由主題定義（A=0 報章直角，B/C=10） */
  --r-input: 4px;
  --r-btn:   6px;

  /* 動效 */
  --dur: 160ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ── 基礎（各主題共享） ─────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; }

/* focus ring 是設計元素，不是瀏覽器默認 */
:focus-visible {
  outline: 2px solid var(--focus, var(--mint));
  outline-offset: 2px;
}

/* 動效尊重 reduced-motion（D-P 原則） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 共享：頁面容器 */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--s5); }

/* 共享：mono 元數據基礎 */
.mono { font-family: var(--font-mono); }

/* 共享：demo 變體導覽條（非設計本體，僅供並排對比） */
.variant-strip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  padding: var(--s1) var(--s3);
  background: var(--grey-100);
  color: var(--grey-500);
  border-bottom: 1px solid var(--grey-300);
}
.variant-strip a { color: var(--grey-500); text-decoration: underline; text-underline-offset: 2px; }
.variant-strip .cur { color: var(--ink); font-weight: 500; }