/* 設計語彙（UIUX 第 2 節）：只放變數，其他樣式檔只引用變數。 */
:root {
  --bg: #0E1116;
  --surface: #171B22;
  --raised: #1F2530;
  --line: #2A313C;
  --text: #F2F4F7;
  --muted: #9AA4B2;
  --dim: #667085;
  --accent: #D7F25A;
  --accent-ink: #141A00;
  --info: #5AD1E6;
  --warn: #F4C24B;
  --danger: #FF6B5E;
  --ok: #4ADE80;
  --card-face: #F7F5EF;
  --card-red: #D6453D;
  --card-black: #1B1F27;
  --card-gold: #B8862B;
  --card-back: #243B53;

  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "PingFang TC", system-ui, sans-serif;
  --font-suit: "Segoe UI Symbol", "Apple Symbols", sans-serif;

  --t-display: 800 40px/44px var(--font-num);
  --t-title: 700 24px/30px var(--font);
  --t-head: 700 18px/24px var(--font);
  --t-body: 500 16px/24px var(--font);
  --t-small: 500 14px/20px var(--font);
  --t-micro: 600 12px/16px var(--font);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s12: 48px;
  --r-sm: 8px; --r-md: 12px; --r-full: 999px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .4);

  --d-fast: 120ms;
  --d-base: 220ms;
  --d-slow: 420ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* 頭像底色（低彩度） */
  --av-sand: #6B5B3E; --av-sage: #3F5F4A; --av-sky: #33586E; --av-rose: #6E3B4A; --av-slate: #44506A; --av-clay: #6E4A36;
  /* 段位徽章底色（銅、銀、金、青、紫） */
  --rank-0: #5A4030; --rank-1: #4A5260; --rank-2: #6A5A26; --rank-3: #22545C; --rank-4: #4A3768;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; }
}