/* ============================================================================
   Vyin AI · Robot Lobby UI — Foundations tokens
   ----------------------------------------------------------------------------
   來源：design_handoff_vyin_robot_lobby/README.md（2026-09-30 交付版）。
   絕對數值以 README 為準；README 沒列的，從 HTML 參考稿取比例後對齊尺標，
   並在註解標「derived」。標「proposal」的是待定案提案，定案前不要當規格引用。

   所有變數都以 --kiosk- 開頭。這套 token 與 Vyin 官網（www.vyin.ai）的 token
   是兩個獨立產品，互不引用、互不同步。
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------ Canvas
     四個螢幕的解析度，全部為硬體確認值（Center 1280×800 2026-10-06，之前的 752 是扣掉 Android 系統列的可用區，kiosk 全螢幕沒有系統列；Side 2026-10-05）。
     Side 面板規格 1920×1080，直立安裝，輸出畫面 1080×1920。 */
  --kiosk-center-w: 1280px;
  --kiosk-center-h: 800px;
  --kiosk-side-w: 1080px; /* 32 吋面板 1920×1080 直立 */
  --kiosk-side-h: 1920px;
  --kiosk-face-w: 1024px; /* Kebbi 16:10 */
  --kiosk-face-h: 600px;

  /* ------------------------------------------------------------------- Color
     深色模式 only（kiosk）。錨定 Tailwind neutral。 */
  --kiosk-surface-base: #0a0a0a; /* neutral-950 · 螢幕背景 */
  --kiosk-surface-raised: #171717; /* neutral-900 · 卡片、對話框、海報欄 */
  --kiosk-border: #262626; /* neutral-800 · 2px 內框；進度軌；被打斷後的未說字 */
  --kiosk-text-disabled: #525252; /* neutral-600 · AI 未說出的字；OFF 光點；灰階波形 */
  --kiosk-text-tertiary: #737373; /* neutral-500 · placeholder / 提示 */
  --kiosk-text-secondary: #a3a3a3; /* neutral-400 · 卡片標籤、使用者上一句、meta */
  --kiosk-text-muted-light: #d4d4d4; /* neutral-300 · 媒體上的次要文字；QR 卡標題 */
  --kiosk-text-primary: #fafafa; /* neutral-50  · 主文字、AI 已說出的字 */
  --kiosk-white: #ffffff; /* QR 白底板 */

  --kiosk-success: #10b981; /* ✓ 指令確認、成功燈 */
  --kiosk-warning: #f59e0b; /* COMMAND 收音狀態；網路狀態（錯誤不用紅色） */
  --kiosk-danger: #ef4444; /* 保留，公開螢幕不使用 */

  --kiosk-accent-violet: #8b5cf6; /* 保留給 campaign 以外的產品場景，此 Mode 不用 */
  --kiosk-accent-amber: #fb923c;
  --kiosk-accent-cyan: #22d3ee;

  /* Campaign layer · 每部片可換；只碰小字 eyebrow 與素材底色，不碰 CTA / AI 狀態。
     2026-09-30 依《歡迎光臨魔法秘境》正式海報量測：漂浮系列海報平均色 oklch(0.37 0.07 292) 深紫，
     片名發光平均 oklch(0.68 0.06 68) 奶金。eyebrow 沿用發光的色相、亮度拉到可讀。 */
  --kiosk-camp: oklch(0.84 0.12 68);
  --kiosk-camp-bg: oklch(0.37 0.07 292);

  /* Raw · 參考稿用了但不在色階內的值。原樣保留，待決定是否收斂。 */
  --kiosk-raw-touch-border: #333333; /* 指令提示、Toast 的 inset 內框 */
  --kiosk-raw-camera-bg: #2a2a2a; /* 相機預覽佔位底 */
  --kiosk-raw-dot-future: #404040; /* 路線膠囊裡「還沒到」的站點 */

  /* Overlays */
  --kiosk-overlay-media: rgba(23, 23, 23, 0.8); /* 媒體上的狀態 chip 底 */
  --kiosk-overlay-pill: rgba(23, 23, 23, 0.92); /* 指令提示、Toast 底 */
  --kiosk-dim: rgba(10, 10, 10, 0.62); /* 聆聽時壓在底圖上的遮罩 */
  --kiosk-scrim-top: linear-gradient(180deg, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0));
  --kiosk-scrim-bottom: linear-gradient(0deg, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0));
  /* 對話畫面的底（設計師 2026-10-14：規格也改成跟 film 一樣——首頁輪播進對話那一刻凍住的那張，壓暗 + 模糊）*/
  --kiosk-dialog-blur: 12px;
  --kiosk-dialog-dim: 0.6; /* brightness */
  --kiosk-dialog-scrim: rgba(10, 10, 10, 0.42);
  --kiosk-scrim-cover: linear-gradient(
    90deg,
    #0a0a0a 34%,
    rgba(10, 10, 10, 0.7) 52%,
    rgba(10, 10, 10, 0) 78%
  );
  --kiosk-scrim-cover-strong: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0.92) 30%,
    rgba(10, 10, 10, 0) 75%
  ); /* derived · Attraction Moving，字壓在滿版素材上用 */
  /* standby（Welcome / Exit）的去字 key art 底 · 設計師 2026-10-05 用調圖工具定案 */
  --kiosk-keyart-pos: 58% 85%; /* object-position，也是縮放的原點 */
  --kiosk-keyart-scale: 1.02;
  --kiosk-keyart-opacity: 0.44; /* 圖壓到 44%，字才讀得到 */
  --kiosk-keyart-vignette: 0.65; /* 置中暗角的強度 */
  --kiosk-vignette-bg: radial-gradient(
    ellipse at 50% 55%,
    rgba(10, 10, 10, 0.9) 0,
    rgba(10, 10, 10, 0.4) 42%,
    transparent 72%
  ); /* derived · 壓在 key art 上、讓置中大標可讀的暗角 */
  --kiosk-scrim-h: 208px;
  --kiosk-scrim-h-tall: 252px;

  /* ---------------------------------------------------------------- Gradient
     Grow 是唯一的漸層。只做外框、光點、細線、波形、Kebbi 眼睛；
     不整面填色、不放在正文後面、不做按鈕填色；一屏最多 2 處。 */
  --kiosk-grow-1: #1f6fe0;
  --kiosk-grow-2: #19e27c;
  --kiosk-grow-3: #f4fbd0;
  --kiosk-grow-4: #ffb05a;
  --kiosk-grow-5: #ff6a2b;
  --kiosk-grow: linear-gradient(
    55deg,
    var(--kiosk-grow-1) 0%,
    var(--kiosk-grow-2) 28%,
    var(--kiosk-grow-3) 52%,
    var(--kiosk-grow-4) 74%,
    var(--kiosk-grow-5) 100%
  );
  --kiosk-grow-border: 4px;
  --kiosk-grow-border-photo: 4px;
  --kiosk-grow-border-camera: 8px;

  /* -------------------------------------------------------------------- Glow
     三級：CTA 最亮（一屏只有一個）、聆聽框次之（暫時態）、卡片最弱（內容層）。 */
  --kiosk-glow-cta: 0 0 40px rgba(31, 111, 224, 0.5);
  --kiosk-glow-listen: 0 0 56px rgba(31, 111, 224, 0.4);
  --kiosk-glow-card: 0 0 40px rgba(31, 111, 224, 0.35); /* derived · 參考稿 8 處 */
  --kiosk-halo-full: 0 0 0 6px rgba(25, 226, 124, 0.15); /* derived · 收音 FULL 光點 */
  --kiosk-halo-command: 0 0 0 6px rgba(245, 158, 11, 0.18); /* derived · 收音 COMMAND 光點 */
  --kiosk-orb-shadow: 0 0 0 8px rgba(25, 226, 124, 0.12), 0 0 24px rgba(255, 176, 90, 0.35);
  --kiosk-glow-line: 0 0 40px rgba(25, 226, 124, 0.5); /* derived · Welcome 觸發時 Grow 細線的綠光 */
  --kiosk-text-shadow-media: 0 2px 24px rgba(0, 0, 0, 0.6);
  --kiosk-text-shadow-logo: 0 2px 16px rgba(0, 0, 0, 0.5); /* derived · logo 壓在媒體上 */
  --kiosk-text-shadow-digit: 0 0 80px rgba(0, 0, 0, 0.45); /* derived · 倒數大數字 */

  /* -------------------------------------------------------------- Typography
     Display / 數字：Unbounded（暫代，正式 wordmark 字體 TBD）
     UI / 中文：Noto Sans TC
     標註（非產品 UI）：IBM Plex Mono
     最小字級 16px（閱讀距離 1.5–3 m）。 */
  --kiosk-font-display: 'Unbounded', sans-serif;
  --kiosk-font-ui: 'Noto Sans TC', system-ui, sans-serif;
  --kiosk-font-mono: 'IBM Plex Mono', monospace;

  --kiosk-type-logo: 800 24px/1 var(--kiosk-font-display);
  --kiosk-type-clock: 600 20px/1 var(--kiosk-font-display);
  --kiosk-type-date: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-mic: 500 16px/1 var(--kiosk-font-ui);
  --kiosk-type-transcript: 700 48px/1.5 var(--kiosk-font-ui); /* 72px / 行 · 最多 2 行 */
  --kiosk-type-transcript-hero: 900 64px/1.3 var(--kiosk-font-ui); /* derived · Photo idle 大標 */
  --kiosk-type-caption: 700 36px/1.5 var(--kiosk-font-ui); /* 全螢幕媒體上的 AI 字幕 */
  --kiosk-type-user-live: 500 36px/1 var(--kiosk-font-ui);
  --kiosk-type-user-pill: 500 30px/1 var(--kiosk-font-ui);
  --kiosk-type-card-label: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-card-value: 700 48px/1.3 var(--kiosk-font-ui);
  --kiosk-type-card-value-md: 700 36px/1.3 var(--kiosk-font-ui); /* 建議卡 / 確認卡 */
  --kiosk-type-card-num: 800 84px/1 var(--kiosk-font-display);
  --kiosk-type-action: 700 30px/1 var(--kiosk-font-ui); /* 底部動作列按鈕 */
  --kiosk-type-chip: 500 28px/1 var(--kiosk-font-ui);
  --kiosk-type-cta: 700 24px/1 var(--kiosk-font-ui);
  --kiosk-type-cta-lg: 700 36px/1 var(--kiosk-font-ui);
  --kiosk-type-cta-hero: 700 44px/1 var(--kiosk-font-ui); /* derived · Photo idle 主要 CTA */
  --kiosk-type-cta-hint: 400 20px/1 var(--kiosk-font-ui); /* derived · Photo idle CTA 上方提示 */
  --kiosk-type-status: 500 20px/1 var(--kiosk-font-ui); /* 「Vyin 正在思考」 */
  --kiosk-type-countdown: 800 268px/1 var(--kiosk-font-display);
  --kiosk-type-countdown-pill: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-countdown-pill-num: 800 20px/1 var(--kiosk-font-display);
  --kiosk-type-cmd: 700 30px/1 var(--kiosk-font-ui);
  --kiosk-type-cmd-hint: 500 24px/1 var(--kiosk-font-ui);
  --kiosk-type-tag: 500 16px/1 var(--kiosk-font-ui);
  --kiosk-type-toast: 500 24px/1 var(--kiosk-font-ui);
  --kiosk-type-qr-title: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-qr-title-lg: 500 22px/1 var(--kiosk-font-ui);
  --kiosk-type-qr-title-xl: 700 28px/1 var(--kiosk-font-ui);
  --kiosk-type-eyebrow: 700 24px/1 var(--kiosk-font-ui); /* derived · 「現正熱映」campaign 色、字距 .08em */
  --kiosk-type-hero-eyebrow: 500 30px/1 var(--kiosk-font-ui); /* derived · 「歡迎進場」 */
  --kiosk-type-route: 500 20px/1 var(--kiosk-font-ui); /* derived · 「移動中 · 前往 B 點」 */
  --kiosk-type-hint: 500 20px/1 var(--kiosk-font-ui); /* derived · Focus 層級的指令提示「說「等一下」可以暫停」 */
  --kiosk-type-media-title: 700 24px/1 var(--kiosk-font-ui); /* derived · 預告底部片名列 */
  --kiosk-type-media-hint: 500 20px/1 var(--kiosk-font-ui); /* derived · 預告底部「隨時可以問我」膠囊 */
  --kiosk-type-annot: 500 16px/1 var(--kiosk-font-mono); /* 佔位圖標籤，非產品 UI */
  --kiosk-type-annot-sm: 500 14px/1 var(--kiosk-font-mono);

  /* proposal · README 字級表沒列、參考稿出現的大字，收斂成下面這組。定案前可調。 */
  --kiosk-type-hero-xl: 900 120px/1.1 var(--kiosk-font-ui); /* Exit「謝謝觀賞」 */
  --kiosk-type-hero-lg: 900 100px/1.1 var(--kiosk-font-ui); /* Welcome 片名 */
  --kiosk-type-hero-sub: 500 32px/1.4 var(--kiosk-font-ui);
  --kiosk-type-hero-meta: 500 28px/1 var(--kiosk-font-ui); /* 「7 廳 · 19:10 場次」 */
  --kiosk-type-side-title: 700 88px/1.2 var(--kiosk-font-ui);
  --kiosk-type-side-meta: 400 34px/1.5 var(--kiosk-font-ui);

  /* ------------------------------------------------------------------ Radius */
  --kiosk-radius-pill: 999px; /* 對話框、CTA、chip、指令膠囊、Toast */
  --kiosk-radius-card: 32px; /* 卡片、safe-area 容器、照片 */
  --kiosk-radius-plate: 16px; /* QR 白底板 */
  --kiosk-radius-plate-lg: 20px; /* 照片頁 QR 白底板 */
  --kiosk-radius-tag: 8px; /* 小標籤 */
  --kiosk-radius-screen: 24px; /* 裝置外框，僅供參考圖 */
  --kiosk-radius-camera: 36px; /* 相機 campaign 外框 */
  --kiosk-radius-tile: 28px; /* derived · 側螢幕照片牆格 */

  /* ----------------------------------------------------------------- Spacing
     尺標 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --kiosk-space-1: 4px;
  --kiosk-space-2: 8px;
  --kiosk-space-3: 12px;
  --kiosk-space-4: 16px;
  --kiosk-space-5: 16px;
  --kiosk-space-6: 24px;
  --kiosk-space-7: 32px;
  --kiosk-space-8: 44px;
  --kiosk-space-9: 64px;

  --kiosk-margin: 64px; /* 左右安全邊 */
  --kiosk-card-gap: 16px;
  --kiosk-card-pad-y: 32px;
  --kiosk-card-pad-x: 36px;

  /* ------------------------------------------------------------------ Layout
     Center 1280×800 對話畫面格線 */
  --kiosk-topbar-top: 44px; /* y 44–76 */
  --kiosk-topbar-h: 32px;
  --kiosk-topbar-count-top: 36px; /* derived · 有倒數膠囊時 */
  --kiosk-topbar-count-h: 48px;
  --kiosk-ai-top: 120px;
  --kiosk-ai-w: 1152px;
  --kiosk-ai-h: 144px; /* 2 行 */
  --kiosk-ai-w-cover: 732px; /* 封面（Stop Idle）上的 AI 字寬 */
  --kiosk-caption-top: 104px; /* 全螢幕媒體字幕 y */
  --kiosk-caption-top-camera: 44px; /* derived · 拍照畫面不放 logo 與狀態 chip，字幕佔頂列的位置 */
  --kiosk-guide-top: 150px; /* 取景框上緣 = (800 − 500) / 2，畫面正中 */
  --kiosk-status-top: 288px; /* derived · 思考 / 重新連線列（AI 區下緣 +24） */
  --kiosk-safe-top: 296px; /* AI 2 行 · 1152×316（752 → 800：上緣不動、底部多 48） */
  --kiosk-safe-h: 316px;
  --kiosk-safe-top-1line: 224px; /* AI 1 行 · 1152×388 */
  --kiosk-safe-h-1line: 388px;
  --kiosk-safe-h-ext: 432px; /* 對話框隱藏（頂列倒數）· 延伸到 y 728 */
  --kiosk-safe-h-1line-ext: 504px; /* AI 1 行 + 對話框隱藏 · 照片仍 812×456 靠上，多出的 48 留白（設計師裁定） */
  /* 版型規則（設計師 2026-10-14 定）：內容區 = 800 − 頂列 − AI 區（行數 × 72 + 32）− 底部格（依內容 + 底距 44 + 間距 32）。
     上面四個 safe token 都是這條規則的特例（2 行 + 對話框 316 / 1 行 + 對話框 388 / 2 行無 432 / 1 行無 504）。
     新組合：三行 AI 只用在觸控模式或純文字回答（三行 + 對話框只剩 244，放不下 268 的卡片）。 */
  --kiosk-ai-line: 72px;
  --kiosk-ai-gap: 32px; /* AI 區到內容區 */
  --kiosk-slot-gap: 32px; /* 內容區到底部格 */
  --kiosk-slot-chips: 68px; /* 觸控模式的底部格：chips 橫排 */
  --kiosk-ai-h-3line: 216px; /* 3 行 */
  --kiosk-safe-top-3line: 368px; /* 120 + 3 × 72 + 32 */
  --kiosk-safe-h-touch: 360px; /* AI 2 行 + chips 排：800 − 44 − 68 − 32 − 296 */
  --kiosk-safe-h-touch-3line: 288px; /* AI 3 行 + chips 排：800 − 44 − 68 − 32 − 368 */
  --kiosk-pill-x: 212px;
  --kiosk-pill-w: 856px;
  --kiosk-pill-bottom: 44px;
  --kiosk-pill-h: 84px;
  --kiosk-pill-h-listen: 96px;
  --kiosk-pill-pad-x: 44px;
  --kiosk-actions-gap: 12px; /* 底部動作列按鈕間距 */
  --kiosk-cta-hint-bottom: 168px; /* derived · Photo idle CTA 提示文字 bottom */
  --kiosk-cmd-w: 480px;
  --kiosk-cmd-h: 76px;
  --kiosk-cmd-x: 400px; /* (1280 − 480) / 2 */
  --kiosk-toast-bottom: 48px; /* derived */
  --kiosk-media-bar-bottom: 88px; /* derived · 預告片名列 */
  --kiosk-media-progress-bottom: 44px; /* derived · 預告進度條 */
  --kiosk-media-progress-h: 8px;
  --kiosk-route-top: 40px; /* derived · 路線膠囊 */
  --kiosk-standby-qr-top: 248px; /* derived · Exit standby 右側 292 QR 的 y（hero 垂直置中，800 時下移 24） */

  --kiosk-qr-card: 268px;
  --kiosk-qr-card-lg: 292px; /* Exit 唯一 CTA */
  --kiosk-qr-code: 140px;
  --kiosk-qr-code-lg: 160px; /* derived · 292 卡 */
  --kiosk-qr-code-xl: 212px; /* derived · 照片 Review 頁 */
  --kiosk-qr-plate-pad: 16px;
  --kiosk-qr-plate-pad-lg: 20px;

  --kiosk-camera-inset: 28px;
  --kiosk-guide-w: 692px; /* 取景框，水平置中；垂直位置見 --kiosk-guide-top */
  --kiosk-guide-h: 500px;
  --kiosk-guide-border: 5px;
  --kiosk-photo-w: 600px; /* 16:9 · AI 1 行 */
  --kiosk-photo-h: 340px;
  --kiosk-photo-w-lg: 812px; /* 16:9 · 對話框隱藏 */
  --kiosk-photo-h-lg: 456px;

  --kiosk-mic-dot: 12px;
  --kiosk-orb: 24px;
  --kiosk-caret-w: 4px;
  --kiosk-caret-h: 40px;
  --kiosk-wave-bar-w: 8px;
  --kiosk-wave-bar-min: 8px;
  --kiosk-wave-bar-max: 36px;
  --kiosk-wave-gap: 6px;
  --kiosk-progress-w: 32px;
  --kiosk-progress-h: 8px;
  --kiosk-ring: 32px;
  --kiosk-ring-inner: 24px;
  --kiosk-check: 36px;

  /* ------------------------------------------------------------------ Motion
     起始值，現場再調。 */
  --kiosk-dur-chrome: 200ms; /* 介面層級切換淡入淡出 */
  --kiosk-dur-press: 120ms; /* 按下回饋 */
  --kiosk-dur-fade: 200ms; /* 句子切換 */
  --kiosk-dur-rise: 300ms; /* 對話框升起；被打斷的字褪色 */
  --kiosk-dur-flash: 450ms; /* 快門白閃 */
  --kiosk-dur-pulse: 900ms; /* 思考光點 */
  --kiosk-dur-hint: 1500ms; /* 非指令提示 */
  --kiosk-dur-toast: 3000ms;
  --kiosk-dur-caption: 3000ms; /* 媒體字幕停留 */
  --kiosk-ease: cubic-bezier(0.33, 1, 0.68, 1);
}