/* 扛扛 KangKang — design tokens（依 DESIGN.md 第 2 節）
   只放變數。改色、改字級先改這裡。 */

:root {
  /* ---------- 品牌色（不另外加品牌以外的顏色） ---------- */
  --paper: #F8F5EE;    /* 暖米白：主要底色（跟開場動畫、扛仔同色） */
  --ink: #201E1D;      /* 炭黑：文字、描邊、按鍵陰影 */
  --red: #EC3013;      /* 朱紅：品牌色、色塊、重點 */
  --oat: #DDC9B9;      /* 燕麥：沙發色、次要色塊 */
  --oat-soft: #EDE3DA; /* 燕麥淺色：卡片底 */
  --cream: #FBF8F4;    /* 輸入框、卡片 */
  --muted: #5F5955;    /* 次要文字（暖白上 6.1:1、燕麥淺色上 5.4:1；燕麥底上不夠，改用炭黑） */

  /* ---------- 語意色（區塊會改寫這幾個） ---------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --line: var(--ink);
  --accent: var(--red);
  --focus: var(--red);
  --key-shadow: var(--ink);
  --selection: var(--oat);

  /* ---------- 字體 ---------- */
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  --font-latin: "Jost", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-cute: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-jp: "Huninn", "Noto Sans TC", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* 字級：大標、中標依 DESIGN.md；其他是延伸 */
  --fs-display: clamp(2.4rem, 7vw, 5.5rem);
  --lh-display: 1.02;
  --ls-display: -0.02em;
  --fs-h2: clamp(1.6rem, 3.6vw, 2.6rem);
  --lh-h2: 1.12;
  --fs-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --lh-h3: 1.3;
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16–17px */
  --lh-body: 1.75;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;
  --fs-price: clamp(2.6rem, 6.5vw, 4.75rem);  /* 大數字（價格）：Jost 800 */
  --fs-huge: clamp(3rem, 10vw, 8.5rem);       /* 頁尾那句話這種超大字 */
  --fs-on-red-min: 1.1875rem;                 /* 朱紅底上的小字最小 19px 粗體（算大字） */

  /* ---------- 間距（4px 為單位） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: clamp(64px, 10vw, 144px);
  --section-pad-tight: clamp(48px, 6vw, 88px);

  /* ---------- 版面 ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --gutter: clamp(16px, 4vw, 40px);  /* 手機 16px 邊距 */
  --header-h: 72px;

  /* ---------- 圓角 ---------- */
  --radius-key: 14px;
  --radius-field: 12px;
  --radius-card: 20px;
  --radius-lg: clamp(24px, 4vw, 48px);
  --radius-pill: 999px;

  /* ---------- 邊框與陰影（實心、不模糊） ---------- */
  --border-w: 2px;
  --border: var(--border-w) solid var(--ink);
  --shadow-key: 0 5px 0 var(--key-shadow);
  --shadow-key-hover: 0 6px 0 var(--key-shadow);
  --shadow-key-active: 0 1px 0 var(--key-shadow);
  --shadow-card: 6px 6px 0 var(--ink);
  --shadow-card-hover: 8px 9px 0 var(--ink);
  --shadow-burst: 6px 6px 0 var(--ink);
  --shadow-pop: 4px 5px 0 var(--ink);

  /* ---------- 動態 ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-4: 800ms;

  /* ---------- 圖層 ---------- */
  --z-base: 1;
  --z-pop: 20;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}

@media (max-width: 767.98px) {
  :root {
    --header-h: 64px;
  }
}