/* ==========================================================================
   圓覺經舍 — 設計 token
   spec/current.md v1.1 §4 的鏡像。**本檔是全站唯一允許寫死數值的檔案**
   （§4 前言：元件層禁止出現 font-size px 字面值、hex 色碼、間距 px 字面值）。

   改動任何一個值以前，先改 spec §4 並記 spec/changelog.md。
   CSS 採 mobile-first：:root 為手機值，min-width 768px 覆寫為平板值，
   min-width 1024px 覆寫為桌機值（斷點依 §4.4）。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     §4.1 色彩（10 個，與 spec 表格逐列相符）
     --------------------------------------------------------------------- */
  --c-bg: #F7F4EE;        /* 主背景（米白） */
  --c-bg-alt: #F1ECE3;    /* 交錯區塊背景（暖灰） */
  --c-surface: #FBF9F5;   /* 卡片／面板底 */
  --c-line: #DED6C8;      /* 分隔線、框線 */
  --c-ink: #33302B;       /* 內文與標題主色 */
  --c-ink-soft: #5C564E;  /* 次要文字、標籤、圖說 */
  --c-green: #2F4438;     /* 深墨綠：頁尾底、強調 */
  --c-brown: #7A5C3C;     /* 赭褐：小標、圖示 */
  --c-gold: #B08D57;      /* 金：僅限分隔線／邊框／圖示描邊。禁止用於任何文字 */
  --c-on-dark: #EDE7DC;   /* 深底（--c-green）上的文字 */

  /* --c-ink 的三通道值，供元件層做半透明疊色用（§5.2 首屏暗化漸層 0 -> 0.45、
     §4.7 --lightbox-veil 0.9）。與 --c-ink #33302B 同色，只是另一種表示法，
     故視為 §4.1 的一部分，不算「多餘的色彩 token」。
     用法：rgb(var(--c-ink-rgb) / 0.45)  ← 元件層仍不得出現 hex（D6）
     依 Orchestrator 2026-09-08 13:40 裁決第 2 點。 */
  --c-ink-rgb: 51 48 43;

  /* ---------------------------------------------------------------------
     §4.2 字級（此區為「手機」值；平板／桌機在下方 media query 覆寫）
     硬性下限：內文 >= 18px、圖說/標籤/小字/版權列 >= 16px、電話 >= 28px
     --------------------------------------------------------------------- */
  --fs-hero: 40px;         /* 首屏主標 */
  --fs-hero-sub: 24px;     /* 首屏副標 */
  --fs-hero-lead: 18px;    /* 首屏引言 */
  --fs-h2: 30px;           /* 區塊標題 */
  --fs-h3: 22px;           /* 卡片／小卡標題、圖片標題 */
  --fs-body: 18px;         /* 內文段落 */
  --fs-label: 17px;        /* 簡歷標籤與值、圖說、QR 說明、導覽提示 */
  --fs-nav: 18px;          /* 導覽列項目 */
  --fs-phone-label: 17px;  /* 「手機一／手機二」標籤 */
  --fs-phone: 30px;        /* 電話號碼 */
  --fs-footer: 18px;       /* 頁尾文字 */
  --fs-fineprint: 16px;    /* 版權列 */

  /* §4.2 行高與字距（不隨斷點改變） */
  --lh-tight: 1.25;   /* 標題 */
  --lh-body: 1.9;     /* 內文（年長受眾，刻意拉寬） */
  --lh-ui: 1.5;       /* 導覽、標籤、按鈕 */
  --ls-title: 0.08em; /* 中文標題字距 */
  --ls-body: 0.02em;  /* 內文字距 */

  /* ---------------------------------------------------------------------
     §4.3 間距階梯（不隨斷點改變）
     --------------------------------------------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* §4.3 語意間距（此區為「手機」值） */
  --sp-section: var(--sp-10);                  /* 各區塊上下留白 */
  --sp-section-lg: calc(var(--sp-section) * 1.5); /* 僅 §5.3 關於法師使用 */
  --sp-gutter: var(--sp-3);                    /* 容器左右安全邊距 */

  /* §4.3 固定尺寸 token（本節為寬高數值的唯一事實來源） */
  --container-max: 1120px;  /* 內容容器最大寬 */
  --qr-size: 200px;         /* §5.8 LINE QR 區塊邊長（正方形，寬＝高）。
                               手機斷點由元件層以 min(var(--qr-size), 100%) 收縮，
                               維持 1:1；實檔到位後同一 token 套用於 line-qr.png。 */

  /* ---------------------------------------------------------------------
     §4.4 斷點（供文件與 JS 讀取；CSS media query 本身無法用 var()，
     故下方 @media 內為 spec 同值的字面量）
     --------------------------------------------------------------------- */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  /* ---------------------------------------------------------------------
     §4.5 導覽列尺寸
     --------------------------------------------------------------------- */
  --nav-h-desktop: 76px;
  --nav-h-mobile: 60px;

  /* ---------------------------------------------------------------------
     §4.7 互動與動態
     --------------------------------------------------------------------- */
  --tap-min: 44px;              /* 最小可點區域（高與寬） */
  --anim-rise: 24px;            /* 捲動淡入初始位移 translateY */
  --anim-dur: 400ms;            /* 捲動淡入時長 */
  --anim-ease: ease-out;        /* 捲動淡入緩動 */
  --lightbox-max-w: 800px;      /* 燈箱圖片最大顯示寬（與 §6.1 相簿輸出寬刻意相等） */
  --lightbox-max-h: 85vh;       /* 燈箱圖片最大顯示高 */
  --lightbox-veil: rgb(var(--c-ink-rgb) / 0.9); /* --c-ink @ 0.9 */
  --hero-veil-alpha: 0.7;       /* §5.2 首屏暗化漸層終點 alpha（起點固定 0）。
                                   §4.7 授權：0.6 實測仍有 6/12 段 < 4.5:1 -> 升 0.7。
                                   0.7 下 11/12 段達標，餘 375 副標 4.32 已 ESCALATION。
                                   量測：tools/verify/check-hero-contrast.py */

  /* ---------------------------------------------------------------------
     §4.6 字族串列（fallback 順序與 spec 表格逐字相符）
     --------------------------------------------------------------------- */
  --ff-title: "Noto Serif TC", "Songti TC", "PMingLiU", "Source Han Serif TC", serif;
  --ff-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --fw-title: 600; /* §4.6：標題僅載入字重 600 */
  --fw-body: 400;  /* §4.6：內文僅載入字重 400 */

  /* ---------------------------------------------------------------------
     衍生值（非 §4 表列新數值）
     以下每一項都不是新規格，而是把 §4 / §5 已有的數值換算成可直接套用的形式，
     目的只有一個：讓元件層（style.css / index.html / main.js）不必寫死字面值。
     --------------------------------------------------------------------- */
  --nav-h: var(--nav-h-mobile);                     /* 當前斷點的導覽列高（§4.5） */
  --scroll-mt: calc(var(--nav-h) + var(--sp-2));    /* §4.5：錨點落點 = 導覽列高 + --sp-2 */
  --bw-hair: 1px;        /* §5.1／§5.3／§5.6／§5.8 明文的 1px 分隔線與邊框 */
  --bw-accent: 3px;      /* §5.3 簡歷小卡左側 3px --c-gold 直線 */
  --focus-ring-w: 2px;   /* §5.14 focus 樣式：2px --c-brown outline */
  --focus-ring-offset: 2px; /* §5.14 focus 樣式：2px offset */
}

/* ==========================================================================
   §4.4 平板：768px - 1023px
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    /* §4.2 字級（平板） */
    --fs-hero: 52px;
    --fs-hero-sub: 26px;
    --fs-hero-lead: 19px;
    --fs-h2: 36px;
    --fs-h3: 23px;
    --fs-body: 19px;
    --fs-label: 17px;
    --fs-nav: 18px;
    --fs-phone-label: 17px;
    --fs-phone: 32px;
    --fs-footer: 18px;
    --fs-fineprint: 16px;

    /* §4.3 語意間距（平板） */
    --sp-section: var(--sp-12);
    --sp-gutter: var(--sp-4);

    /* §5.1.1：手機版導覽僅適用 < 768px，故 >= 768px 起用桌機導覽列高 */
    --nav-h: var(--nav-h-desktop);
  }
}

/* ==========================================================================
   §4.4 桌機：>= 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    /* §4.2 字級（桌機） */
    --fs-hero: 64px;
    --fs-hero-sub: 30px;
    --fs-hero-lead: 20px;
    --fs-h2: 40px;
    --fs-h3: 24px;
    --fs-body: 19px;
    --fs-label: 17px;
    --fs-nav: 18px;
    --fs-phone-label: 17px;
    --fs-phone: 36px;
    --fs-footer: 18px;
    --fs-fineprint: 16px;

    /* §4.3 語意間距（桌機） */
    --sp-section: var(--sp-16);
    --sp-gutter: var(--sp-6);
  }
}