/* ==========================================================================
   MIB 示範站共用 design tokens
   命名沿用 example-level4.html 既有系統（--fs / --sp / --lh / --ls / --r /
   --t / --ease / --z / --measure / --paper / --ink / --line）。
   這個檔只放「尺度」：字級、間距、圓角階、陰影階、動效、層級、量測。
   顏色與字體家族是「語意槽」，實際值由 theme-l*.css 填入。
   ========================================================================== */
:root{
  /* ---- 字級：9 階流體尺度，390px → 1440px 之間線性放大 ---- */
  --fs--2: clamp(.6875rem, .66rem + .15vw, .75rem);
  --fs--1: clamp(.8125rem, .78rem + .2vw,  .875rem);
  --fs-0:  clamp(1rem,     .95rem + .25vw, 1.0625rem);   /* 內文 16–17px */
  --fs-1:  clamp(1.125rem, 1.05rem + .4vw, 1.25rem);
  --fs-2:  clamp(1.375rem, 1.2rem + .9vw,  1.5625rem);
  --fs-3:  clamp(1.625rem, 1.3rem + 1.5vw, 1.9375rem);
  --fs-4:  clamp(2rem,     1.5rem + 2.6vw, 2.75rem);
  --fs-5:  clamp(2.5rem,   1.6rem + 4.4vw, 4rem);
  --fs-6:  clamp(3.25rem,  1.9rem + 6.5vw, 6rem);

  /* ---- 行高：中文內文 1.8、標題 1.2；tight 只給歐文/數字 display ---- */
  --lh-tight: 1.02;
  --lh-head:  1.2;
  --lh-ui:    1.5;
  --lh-body:  1.8;

  /* ---- 字距：中文內文 0，絕不負值；tight 只給歐文 display；1/2 給小標籤與英文 caps ---- */
  --ls-tight: -.01em;
  --ls-0: 0;
  --ls-1: .06em;
  --ls-2: .16em;

  /* ---- 量測：長段落一律受限 ---- */
  --measure: 46ch;

  /* ---- 間距：8 階；最大的兩階流體，手機不會出現 9rem 的空白 ---- */
  --sp-0: .25rem;
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
  --sp-6: clamp(3.5rem, 2.4rem + 3vw,  5.5rem);
  --sp-7: clamp(5rem,   3rem + 5.5vw,  9rem);

  /* ---- 圓角：3 階 + pill。theme 只改這四個值來換風格（銳利 / 柔和） ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 8px;
  --r-3: 16px;
  --r-pill: 999px;

  /* ---- 陰影：只有兩階，顏色由 --shadow-ink 推導 ---- */
  --shadow-ink: #000;
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
              0 2px 6px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
  --shadow-2: 0 10px 30px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
              0 2px 8px  color-mix(in srgb, var(--shadow-ink) 8%, transparent);

  /* ---- 動效：三檔 + stagger，一條 easing ---- */
  --t-fast: 140ms;
  --t-med:  240ms;
  --t-slow: 460ms;
  --t-stagger: 80ms;
  --ease: cubic-bezier(.2,.7,.3,1);
  --lift: 3px;
  --bd: 2px;

  /* ---- 層級 ---- */
  --z-nav:   80;
  --z-scrim: 90;
  --z-cart:  95;
  --z-toast: 99;
  --z-top:  130;

  /* ---- 容器 ---- */
  --container: 75rem;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);

  /* ---- 語意色槽（預設中性；theme-l*.css 覆寫） ---- */
  --paper:   #ffffff;
  --paper-2: #f5f5f4;
  --paper-3: #ebebe9;
  --ink:     #17191d;
  --ink-2:   color-mix(in srgb, var(--ink) 78%, var(--paper));
  --mute:    color-mix(in srgb, var(--ink) 58%, var(--paper));
  --line:    color-mix(in srgb, var(--ink) 14%, var(--paper));
  --line-2:  color-mix(in srgb, var(--ink) 24%, var(--paper));
  --accent:  #1f63c4;
  --on-accent: #ffffff;
  --scrim:   color-mix(in srgb, #000 55%, transparent);
  --nav:     color-mix(in srgb, var(--paper) 86%, transparent);
  --img-bg:  var(--paper-3);   /* 圖片載入前的低飽和底色，不白閃 */

  /* ---- 字體槽 ---- */
  --disp: 'Noto Serif TC', 'Songti TC', serif;
  --sans: -apple-system, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}