/* ==========================================================================
   tokens.css — 全站設計 token（規格見 docs/design-system.md）
   公開外殼頁（首頁、news、works、115-1、404、offline、tools）共用。
   只准引用這裡的變數；新增顏色／字級／間距／圓角先改規格文件再改這裡。
   ========================================================================== */

/* ---------- 字型（全部自架，不走 Google Fonts） ---------- */
/* Press Start 2P（OFL）：只有拉丁字，用在英文大標與數字 */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/press-start-2p-latin-400.woff2) format("woff2")}
/* Silkscreen（OFL）：拉丁像素小字 */
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/silkscreen-latin-400.woff2) format("woff2")}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/silkscreen-700-2.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/silkscreen-700-1.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* 俐方體 11 號 Cubic 11（免費商用，授權見 fonts/LICENSE-cubic11.txt）：中文像素字全字集（約 389 KB）。
   內容常改，所以不做子集；font-display:swap，不預載。像素格 = 1/12 em，只在 12／24／36／48px 顯示才清晰。 */
@font-face{font-family:"Cubic 11";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/cubic11.woff2) format("woff2")}

:root{
  color-scheme: dark;

  /* ---------- 色彩：18 色，禁止在頁面寫死 hex ---------- */
  /* 背景層（由深到淺） */
  --c-bg-0:#070d15;       /* 最深：頁尾、海床 */
  --c-bg:#0c1622;         /* 頁面底色 */
  --c-sunk:#0e1b27;       /* 凹陷：輸入框、次要區塊 */
  --c-surface:#12202e;    /* 卡片 */
  --c-surface-2:#173142;  /* 卡片 hover／強調卡 */
  /* 文字 */
  --c-ink:#eaf6ff;        /* 主要文字 */
  --c-ink-2:#c2d6e4;      /* 次要文字 */
  --c-ink-3:#a9bfce;      /* 輔助文字（在 surface 上 8.7:1；禁止再用 opacity 淡化） */
  /* 線條 */
  --c-line:#2c4a5e;       /* 裝飾分隔線（非互動） */
  --c-line-strong:#56809a;/* 元件框線（對 surface ≥3:1） */
  /* 品牌／語意 */
  --c-accent:#38e1d6;     /* 青：主要互動 */
  --c-accent-hi:#6cf0e7;
  --c-gold:#ffc24a;       /* 金：寶箱、主 CTA 強調 */
  --c-gold-hi:#ffd778;
  --c-on-accent:#04222a;  /* 放在 accent／gold 淺色底上的文字 */
  --c-danger:#ff8a80;     /* 錯誤文字（深底上 ≥7:1） */
  --c-danger-bg:#c62828;  /* 錯誤／通知徽章底（白字 5.6:1） */
  --c-success:#7ee2a8;    /* 成功文字 */
  /* 深度帶（首尾相接，無接縫） */
  --c-depth-0:#194e68;  --c-depth-1:#164a63;  --c-depth-2:#103a52;
  --c-depth-3:#0c2636;  --c-depth-4:#0a1622;  --c-depth-5:#070d15;
  /* 半透明（只用下列 rgb 組） */
  --rgb-bg:12,22,34; --rgb-accent:56,225,214; --rgb-gold:255,194,74; --rgb-shade:2,8,14;

  /* ---------- 字體家族 ---------- */
  --f-cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-body:var(--f-cjk);
  --f-pixel:"Silkscreen","Cubic 11",var(--f-cjk);          /* 小標、標籤、按鈕 */
  --f-display:"Press Start 2P","Cubic 11",var(--f-cjk);    /* 大標、數字 */
  --f-mono:ui-monospace,"SFMono-Regular",Consolas,"Cubic 11",var(--f-cjk);

  /* ---------- 字級（最小 12px；像素字只用 12／24／36／48） ---------- */
  --fs-xs:.75rem;    /* 12 caption、tag、badge */
  --fs-sm:.875rem;   /* 14 meta、按鈕、輔助說明 */
  --fs-base:1rem;    /* 16 內文 */
  --fs-md:1.25rem;   /* 20 h3、卡片標題 */
  --fs-lg:1.5rem;    /* 24 h2（手機）、h1（手機） */
  --fs-xl:2.25rem;   /* 36 h2（桌機） */
  --fs-2xl:3rem;     /* 48 h1（桌機） */
  --lh-body:1.8; --lh-tight:1.35;
  --ls-pixel:.08em; --ls-body:.02em;

  /* ---------- 間距（4px 基準） ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --w-content:880px;  /* 內容頁版寬 */
  --w-wide:1080px;    /* 首頁、作品集版寬 */
  --gutter:24px;      /* 左右留白（手機 16，見下方） */
  --tap:44px;         /* 最小點擊尺寸 */

  /* ---------- 圓角：像素風一律直角 ---------- */
  --r-0:0;
  --r-pill:999px;     /* 只給 115-1 活動頁 chip */

  /* ---------- 邊框、陰影、動態 ---------- */
  --bw:2px; --bw-strong:3px;
  --shadow-hard:4px 4px 0 0 rgba(0,0,0,.5);
  --shadow-hard-hover:6px 6px 0 0 rgba(0,0,0,.5);
  --glow-accent:0 0 10px rgba(var(--rgb-accent),.6);
  --glow-gold:0 0 12px rgba(var(--rgb-gold),.55);
  --focus-ring:3px solid var(--c-gold);
  --t-fast:.12s; --t-base:.2s; --t-slow:.35s;
  --ease-step:steps(3);            /* 像素感按壓／彈出 */
  --ease-out:cubic-bezier(.2,.7,.2,1);

  /* ---------- 圖層 ---------- */
  --z-deco:5; --z-content:10; --z-actor:9; --z-hud:30;
  --z-panel:40; --z-menu:45; --z-toast:50; --z-overlay:60; --z-splash:100;
}
@media (max-width:760px){ :root{ --gutter:16px } }