/* Design Tokens — 全站設計變數
 * 修改色票、字級、間距，請從這支檔案開始。
 */

:root {
  /* —— 色彩 —— */
  --c-bg:        #FAF7F2;  /* 米白底（紙感） */
  --c-bg-alt:    #F1ECE3;  /* 淺米（區塊交替） */
  --c-ink:       #1A1A1A;  /* 主文字 / 深炭 */
  --c-ink-2:     #4A4A4A;  /* 副文字 */
  --c-ink-3:     #8A8479;  /* 輔助文字 */
  --c-line:      #E5DFD5;  /* 分隔線 */

  --c-brand:     #1A63C8;  /* 臺中藍（主色 / 國民黨識別） */
  --c-brand-dk:  #134E9E;  /* hover 加深 */
  --c-deep:      #112A4D;  /* 海軍藍（深色區塊底） */
  --c-accent:    #3CA1EE;  /* 亮天空藍（年輕 / 強調 / 高亮） */
  --c-warm:      #7FC0F0;  /* 亮天藍（淺藍 pop，全藍系第 4 階；原暖黃已收） */

  --c-white:     #FFFFFF;
  --c-black:     #0A0A0A;

  /* —— 字型 —— */
  --font-sans-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-sans-en: "Noto Sans", "Noto Sans TC", system-ui, sans-serif;
  --font-display: "Noto Sans", "Noto Sans TC", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* —— Fluid 字級（clamp: 手機 / 平板 / 桌機）—— */
  --fs-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --fs-sm:   clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
  --fs-base: clamp(1rem,     0.94rem + 0.30vw, 1.125rem);
  --fs-md:   clamp(1.125rem, 1.00rem + 0.60vw, 1.5rem);
  --fs-lg:   clamp(1.5rem,   1.20rem + 1.50vw, 2.5rem);
  --fs-xl:   clamp(2.25rem,  1.80rem + 2.30vw, 4rem);
  --fs-2xl:  clamp(3rem,     2.20rem + 4.00vw, 6rem);
  --fs-3xl:  clamp(4rem,     2.80rem + 6.00vw, 9rem);

  /* —— 間距 —— */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;
  --sp-12: 14rem;

  /* —— 圓角 —— */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* —— 陰影 —— */
  --shadow-sm: 0 1px 2px rgba(26,26,26,.06);
  --shadow-md: 0 4px 16px rgba(26,26,26,.08);
  --shadow-lg: 0 16px 48px rgba(26,26,26,.12);

  /* —— 動畫曲線 —— */
  --ease-out:  cubic-bezier(.16,.84,.44,1);
  --ease-in:   cubic-bezier(.5,0,.75,0);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  /* —— Layout —— */
  --container:  min(92vw, 1280px);
  --container-narrow: min(92vw, 880px);
  --header-h: 72px;

  /* —— Z-index —— */
  --z-base:    1;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
}

/* 手機：把最大的兩個間距 token 收斂。
   --sp-9 / --sp-10 全站只用於區塊垂直 padding 與大段落 margin，
   桌機 96px / 128px 在手機上留白過多，逐級縮小讓垂直節奏更緊湊。 */
@media (max-width: 880px) {
  :root {
    --sp-9:  4.5rem;   /* 96px  → 72px */
    --sp-10: 5.5rem;   /* 128px → 88px */
  }
}
@media (max-width: 520px) {
  :root {
    --sp-9:  3.25rem;  /* → 52px */
    --sp-10: 4rem;     /* → 64px */
  }
}