/* ==========================================================================
   TECXIA · TOKENS
   整站唯一的來源：兩張紙、一個強調色、六級字、一套 8px 刻度、三條曲線、
   一份玻璃配方、安全區域。站上不得出現硬寫的顏色、尺寸或曲線。

   1. 字型：三個自架檔（Fraunces 可變 + Inter 可變），無外部 CDN。
   2. 紙與墨：暖白紙／暖黑墨；兩個近中性色階（--band 區塊帶、--slot 圖位）。
      整站唯一的色相是 --accent（深青），只用於主要動作與焦點框。
   3. 字階：六級，全部 clamp() 流體；站上沒有小於 13.5px 的可讀文字。
   4. 刻度：8px 基準 + 欄位寬 + 觸控下限。
   5. 動效：三條曲線、四種時間（最短 150ms，最長 700ms）。
   6. 玻璃：一份配方，三個功能性浮層共用（見 glass.css）。
   ========================================================================== */

/* ── 1. 字型 ───────────────────────────────────────────────────────────
   Fraunces 是可變字型（opsz / wght / SOFT / WONK），所以同一個檔案就能
   同時供主標（大 opsz、緊字距）與小標題使用。Inter 可變供 UI 與正文。
   家族名寫成 InterVar，是為了與 CDN 上那個通用 Inter 區分開來。 */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'InterVar';
  src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ── 2. 紙與墨（淺色是預設；:root 沒有 data-theme 時就是這張紙）────────── */
:root{
  color-scheme:light;

  --paper:#F7F7F5;              /* 紙：近中性暖白 */
  --band:#EFEFEC;               /* 區塊帶：比紙深一階的實色面（不是漸層） */
  --slot:#EDEDE9;               /* 圖位：等待素材的那塊面 */
  --ink:#121110;                /* 墨：正文（對紙 17.4:1） */
  --ink-2:#4A4945;              /* 次級墨：說明（對紙 8.2:1、對帶 7.6:1） */
  --ink-3:#63625D;              /* 最淡墨：註記（對紙 5.6:1、對帶 5.1:1） */
  --accent:#2A7180;             /* 強調色：深青，唯一色相（白字壓上去 5.6:1） */
  --on-accent:#FFFFFF;          /* 壓在強調色上的字 */
  --field:rgba(18,17,16,.05);   /* 真正輸入框的底 */
  --line:rgba(18,17,16,.24);    /* 真正輸入框的框線 */
  --scrim:rgba(18,17,16,.40);   /* 浮層背後的遮罩（實色，不是漸層） */
  --focus:var(--accent);        /* 全站唯一的焦點框顏色 */

  /* 玻璃：一份配方。--glass 自帶底色（.84/.82），所以上面的字在動的背景之上仍 ≥4.5:1，
   捲到帶底下的內容會被霧成一片，而不是與帶上的字撞在一起。 */
  --glass:rgba(247,247,245,.84);
  --glass-blur:12px;            /* 手機：12px（GPU 輕） */
  --glass-sat:1.4;
  --glass-line:rgba(255,255,255,.10);  /* 1px 外框 */
  --glass-hi:rgba(255,255,255,.22);    /* 邊緣高光（inset） */
  --glass-sheen:rgba(255,255,255,.16); /* 極淡折射光暈 */
  --glass-shade:rgba(18,17,16,.05);    /* 玻璃自身的 scrim */
  /* 只有浮起來的玻璃層才有的落影（頂列與詳情面板；內容區與內嵌的聯絡面板沒有） */
  --glass-drop:0 1px 1px rgba(18,17,16,.035),0 10px 30px rgba(18,17,16,.055);
}

/* ── 深色紙：同一個系統的另一張紙。強調色不換（不變色，只換紙）────────── */
:root[data-theme="dark"]{
  color-scheme:dark;

  --paper:#0A0A0B;
  --band:#18181B;
  --slot:#1E1E22;
  --ink:#F2F1EE;                /* 對紙 13.4:1 */
  --ink-2:#B3B1AC;              /* 對紙 6.6:1、對帶 8.1:1 */
  --ink-3:#9A9893;              /* 對紙 5.6:1、對帶 6.0:1 */
  --accent:#2A7180;
  --on-accent:#FFFFFF;
  --field:rgba(242,241,238,.06);
  --line:rgba(242,241,238,.26);
  --scrim:rgba(0,0,0,.55);
  --glass:rgba(10,10,11,.82);
  --glass-line:rgba(255,255,255,.10);
  --glass-hi:rgba(255,255,255,.22);
  --glass-sheen:rgba(255,255,255,.10);
  --glass-shade:rgba(0,0,0,.10);
  --glass-drop:0 1px 1px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.5);
  --focus:var(--accent);
}

/* 沒有 JS 決定主題時：跟隨系統。寫成排除 data-theme="light" 的形式，
   所以使用者選過淺色就不會被系統的深色蓋掉。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --paper:#0A0A0B;
    --band:#18181B;
    --slot:#1E1E22;
    --ink:#F2F1EE;
    --ink-2:#B3B1AC;
    --ink-3:#9A9893;
    --accent:#2A7180;
    --on-accent:#FFFFFF;
    --field:rgba(242,241,238,.06);
    --line:rgba(242,241,238,.26);
    --scrim:rgba(0,0,0,.55);
    --glass:rgba(10,10,11,.82);
    --glass-line:rgba(255,255,255,.10);
    --glass-hi:rgba(255,255,255,.22);
    --glass-sheen:rgba(255,255,255,.10);
    --glass-shade:rgba(0,0,0,.10);
  --glass-drop:0 1px 1px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.5);
    --focus:var(--accent);
  }
}

/* ── 3. 字階與字族：六級，站上不得出現第七種 font-size ───────────────── */
:root{
  /* CJK 後備：拉丁字面仍然用 Inter / Fraunces，漢字落到系統自己的中文字面，
     不指定就會掉進瀏覽器的通用 serif/sans，簡中站這是必要的。 */
  --font:'InterVar',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --font-d:'Fraunces','InterVar','Songti SC','Noto Serif SC','Noto Sans SC',Georgia,serif;

  --fs-d:clamp(56px, 13.6vw, 172px);   /* 一級：只有 h1 用 */
  --fs-h:clamp(26px, 3.4vw, 44px);     /* 二級：區塊標題、作品名 */
  --fs-xl:clamp(20px, 1.9vw, 27px);    /* 三級：清單標題、流程工時 */
  --fs-l:clamp(17px, 1.35vw, 20px);    /* 四級：引導句、作品一句 */
  --fs-b:clamp(16px, 1.15vw, 18px);    /* 五級：正文 */
  --fs-m:clamp(13.5px, .95vw, 15px);   /* 六級：註記、圖位說明、頁尾 */

  --lh-d:1;                    /* 主標行高：文字方塊留得住字母上緣 */
  --lh-h:1.16;                 /* 標題行高 */
  --lh-b:1.55;                 /* 正文行高 */
  --lh-m:1.45;                 /* 註記行高 */
  --tr-d:-.045em;              /* 主標字距：幾何無襯線的大字要收得更緊 */
  --tr-h:-.012em;              /* 標題字距 */
  --measure:62ch;              /* 正文一行最多 62 字 */

  /* Fraunces 的光學尺寸（內容層的標題）：大字用大 opsz，字腔才張得開 */
  --opsz-h:48;
}

/* ── 4. 刻度：8px 基準、欄位線、觸控下限、頂列高度 ───────────────────── */
:root{
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --sp-8:128px;

  --sec:clamp(64px, 8.5vw, 132px);        /* 區塊上下留白 */
  --pad:clamp(20px, 5vw, 64px);           /* 左右邊距 */
  --maxw:1200px;                          /* 欄位線最寬 */
  --line-w:min(100% - 2 * var(--pad), var(--maxw));

  --r-1:4px;                              /* 圖位／圖示的小圓角 */
  --r-2:18px;                             /* 玻璃浮層的圓角 */
  --tap:44px;                             /* 所有可點目標的下限 */

  --bar-h:62px;                           /* 頂列高度（手機帶狀）；桌機見下方 */
}
/* 桌機的頂列是離邊 12px 的懸浮板：12 + 60 = 72 */
@media (min-width:860px){
  :root{--bar-h:72px}
}

/* ── 5. 動效：三條曲線、四種時間 ─────────────────────────────────────── */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);   /* 進場：快進慢停，不回彈 */
  --ease-io:cubic-bezier(.45,.05,.55,.95);  /* 開合：兩端對稱，像抽屜 */
  --ease-line:cubic-bezier(.32,.72,0,1);    /* 捲動驅動的長位移 */
  --dur-1:150ms;                            /* 一級：顏色與焦點 */
  --dur-2:260ms;                            /* 二級：回饋與開合 */
  --dur-3:440ms;                            /* 三級：捲動進場 */
  --dur-4:700ms;                            /* 四級：主標層與玻璃的長轉場 */
}

/* ── 6. 安全區域：瀏海、手勢列（桌機全部解析為 0px）──────────────────── */
:root{
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
}

/* 玻璃模糊：桌機 24px，手機 12px（見 glass.css 的斷點說明） */
@media (min-width:860px){
  :root{--glass-blur:24px}
}