/* ============================================================
   AllocLab 2.0 Design Tokens
   ------------------------------------------------------------
   擴充 base.html 內已存在的 --al-* 顏色 token。這份檔案新增
   字型、字級、間距、圓角、陰影等 scale。舊 token 不動。
   ============================================================ */

:root {
  /* ── Typography stacks ────────────────────────────────────
     Display: 編輯感 serif，僅 H1 / H2 / kicker 使用
     Body: IBM Plex Sans + Noto Sans TC，內文 / 介面文字
     Numeric: IBM Plex Mono，所有數字 / 價格 / 百分比 ── */
  --ff-display: "Noto Serif TC", "Source Han Serif TC", Georgia, "Times New Roman", serif;
  --ff-body:    "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
                -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-mono:    "IBM Plex Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* ── Type scale (mobile-first, desktop 放大 1.1x) ───────── */
  --fs-micro:   11px;   /* 極小標籤，慎用 */
  --fs-meta:    12px;   /* metadata / 次要標籤 */
  --fs-caption: 13px;   /* caption / 輔助說明 */
  --fs-body:    15px;   /* body 內文 */
  --fs-lead:    17px;   /* lead / 卡片主描述 */
  --fs-h3:      19px;   /* 小標題 */
  --fs-h2:      22px;   /* section 標題 */
  --fs-h1:      30px;   /* 頁面標題 */
  --fs-display: 40px;   /* hero / 大數字 */

  /* ── Line heights ─────────────────────────────────────── */
  --lh-tight:  1.2;     /* 大標題 */
  --lh-snug:   1.4;     /* 小標題 */
  --lh-normal: 1.55;    /* body */
  --lh-loose:  1.7;     /* 長段落 / editorial */

  /* ── Font weights ─────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Letter spacing ───────────────────────────────────── */
  --tracking-tight:   -0.02em;   /* 大標題用 */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;    /* kicker / all-caps 標籤 */

  /* ── Spacing scale（8pt 系統） ───────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Radius scale ─────────────────────────────────────── */
  --r-xs: 2px;   /* chip / pill */
  --r-sm: 6px;   /* card / input */
  --r-md: 10px;  /* major surface */
  --r-lg: 16px;  /* hero 卡片 */

  /* ── Shadows（editorial light） ──────────────────────── */
  --shadow-xs: 0 1px 2px rgba(26, 35, 50, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 35, 50, 0.05);
  --shadow-md: 0 4px 12px rgba(26, 35, 50, 0.06);
  --shadow-lg: 0 12px 32px rgba(26, 35, 50, 0.08);

  /* ── Extended ink（承接 base.html 既有 --al-ink / ink-2 / ink-muted） ─ */
  --al-ink-deep:  #1a2332;    /* 大標題 / 強調數字 */
  --al-paper:     #FAF8F3;    /* editorial off-white，特定區塊 */
  --al-hairline:  rgba(39, 48, 67, 0.08);   /* 1px editorial 分隔線 */

  /* ── Focus ring（柔和） ──────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(110, 143, 179, 0.25);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ── Z-index scale ────────────────────────────────────── */
  --z-dropdown:   100;
  --z-sticky:     200;   /* base.html nav 已佔這層 */
  --z-overlay:    800;
  --z-modal:      900;
  --z-popover:   1000;

  /* ── Layout ───────────────────────────────────────────── */
  --al-container:     960px;
  --al-container-lg: 1200px;

  /* ── Tap target ───────────────────────────────────────── */
  --tap-min: 44px;
}

/* ── Desktop type scale 放大（≥960px） ───────────────────
   手機 15px body 在桌機略小，整體上升 10%。 */
@media (min-width: 960px) {
  :root {
    --fs-body:    16px;
    --fs-lead:    18px;
    --fs-h3:      20px;
    --fs-h2:      24px;
    --fs-h1:      34px;
    --fs-display: 48px;
  }
}