/* =========================================================
   抽獎頁設計基礎值（tokens）— 「深海藍＋光斑」版（2026-11-03 b）
   老闆風格圖：深海軍藍漸層底、柔和光斑、白色大標、天空藍漸層膠囊按鈕、手機亮銀＋暖金反光。
   取樣來源：/Users/elbow/.claude/uploads/b39da680-.../3b06dbb4-image.png（1820×992，
   ffmpeg 轉 rgb24 後逐點取 3×3～9×9 平均，2026-11-03）。
   取樣實值：
     底色　左上 #0a1c27｜上中 #0d2834｜正中 #193e51｜手機版中段亮處 #1e465d｜
           底部 #0c1f2b｜左下最深 #07151d｜手機版上緣 #0f2633
     光斑　左上 #263f4b｜右上 #1c3a46｜上中 #193543
     按鈕　本體 #2e8dfe（手機版 #2f8dfd）｜最飽和 #2c8eff｜上緣反光 #85bcfe
     文字　大標最亮 #faffff｜副標 #a4c0cb
     手機　亮銀高光 #fff2e2｜邊緣 #f8ebd8｜暖金反光 #ebb27a
   校正：#2e8dfe 配白字只有約 3.4:1（不過 AA），所以按鈕「字底下那一段」壓深到 #1c6be0～#1862d4，
         上緣保留取樣的 #85bcfe／#4a9dff 反光；對比由 _對比量測.mjs 實測截圖像素，不是手算。
   層級：原色 → 用途色 → 元件色。元件只引用用途色。
   ========================================================= */
:root {
  /* ---------- 1. 原色（照片取樣） ---------- */
  --c-navy-950: #07151d;       /* 左下最深（取樣） */
  --c-navy-900: #0a1c27;       /* 左上（取樣） */
  --c-navy-850: #0c1f2b;       /* 底部（取樣） */
  --c-navy-800: #0f2633;       /* 手機版上緣（取樣） */
  --c-navy-700: #193e51;       /* 正中（取樣） */
  --c-navy-600: #1e465d;       /* 中段亮處（取樣） */
  --c-bokeh: #263f4b;          /* 光斑（取樣） */
  --c-white: #faffff;          /* 大標（取樣） */
  --c-ink: #f4f8fa;            /* 主文字（此版改成淺色：白字放深底） */
  --c-ink-2: #a4c0cb;          /* 次文字＝副標淡藍灰（取樣） */
  --c-ink-2-on-mist: #b4ccd6;  /* 次文字放玻璃卡（比 #a4c0cb 再亮一階，保 AA） */
  --c-line: rgba(180, 204, 214, 0.28);
  --c-line-soft: rgba(180, 204, 214, 0.16);
  --c-bezel: #04090d;          /* 螢幕黑邊 */
  --c-silver-1: #ffffff;       /* 亮銀高光 */
  --c-silver-2: #dfe7ec;
  --c-silver-3: #9fb2bf;
  --c-silver-4: #5f7584;       /* 銀邊暗部 */
  --c-warm-hi: #fff2e2;        /* 機身亮銀帶暖（取樣） */
  --c-gold-hi: #f8ebd8;        /* 機身邊緣（取樣） */
  --c-gold: #ebb27a;           /* 暖金反光（取樣） */
  --c-gold-deep: #a8733f;
  --c-sky: #2e8dfe;            /* 按鈕天空藍（取樣） */
  --c-sky-hi: #85bcfe;         /* 按鈕上緣反光（取樣） */
  --c-sky-deep: #1c6be0;       /* 按鈕字底（校正，白字 ≥4.5） */
  --c-sky-ink: #9fcbff;        /* 天空藍當「文字」用（深底 AA） */
  /* 手機螢幕裡的畫面（沿用：螢幕內容是暖色實拍，和風格圖手機螢幕一致） */
  --c-haze: #e4dbca;
  --c-sand: #d9c8b4;
  --c-sand-shadow: #a89580;
  --c-sky-screen: #aec7db;
  --c-danger: #ff9b9b;         /* 深底 AA */
  --c-success: #6fe0a6;        /* 深底 AA */

  /* ---------- 2. 用途色 ---------- */
  --bg: var(--c-navy-900);
  --bg-sunken: var(--c-navy-800);
  --surface: #0b2130;            /* 輸入框等實心面 */
  --surface-pearl: var(--c-navy-700);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --text-on-dark: #f5f5f7;
  --border: var(--c-line);
  --border-strong: var(--c-silver-3);
  --action: var(--c-sky-deep);     /* 主按鈕＝天空藍膠囊 */
  --action-hover: #2a7bf0;
  --action-text: #ffffff;
  --focus: var(--c-sky-hi);
  --focus-halo: rgba(46, 141, 254, 0.45);

  /* 深海底：上暗、中段亮、底再暗（照風格圖垂直走向） */
  --navy-ramp: linear-gradient(180deg, var(--c-navy-900) 0%, var(--c-navy-800) 22%, var(--c-navy-700) 52%, var(--c-navy-850) 82%, var(--c-navy-950) 100%);
  /* 光斑：柔邊圓（多段色標慢收，避免一圈一圈） */
  --bokeh:
    radial-gradient(circle at 12% 16%, rgba(120, 160, 180, 0.16) 0, rgba(120, 160, 180, 0.08) 38px, rgba(120, 160, 180, 0) 86px),
    radial-gradient(circle at 84% 22%, rgba(95, 145, 170, 0.13) 0, rgba(95, 145, 170, 0.05) 70px, rgba(95, 145, 170, 0) 130px),
    radial-gradient(circle at 34% 82%, rgba(120, 160, 180, 0.12) 0, rgba(120, 160, 180, 0.05) 34px, rgba(120, 160, 180, 0) 72px),
    radial-gradient(circle at 70% 88%, rgba(95, 145, 170, 0.10) 0, rgba(95, 145, 170, 0) 110px),
    radial-gradient(circle at 56% 8%, rgba(120, 160, 180, 0.09) 0, rgba(120, 160, 180, 0) 54px),
    radial-gradient(60% 55% at 26% 46%, rgba(46, 96, 122, 0.42) 0, rgba(46, 96, 122, 0) 100%);

  /* 材質：亮銀（五段色標＋一道暖金）、深藍玻璃、天空藍膠囊 */
  --metal-silver: linear-gradient(155deg,
      var(--c-silver-1) 0%, var(--c-silver-3) 22%, var(--c-warm-hi) 46%,
      var(--c-silver-4) 70%, var(--c-silver-2) 100%);
  --metal-silver-soft: linear-gradient(155deg, #ffffff 0%, #b9c6cf 40%, #f4f6f8 60%, #8a9ba8 100%);
  --metal-gold: linear-gradient(150deg, var(--c-warm-hi) 0%, var(--c-gold) 34%, var(--c-gold-hi) 55%, var(--c-gold-deep) 84%, var(--c-gold) 100%);
  /* 卡片邊：亮銀為主、轉角一道暖金反光 */
  --edge: linear-gradient(150deg, rgba(255,255,255,.78) 0%, rgba(159,178,191,.28) 26%, rgba(248,235,216,.62) 50%, rgba(95,117,132,.22) 74%, rgba(235,178,122,.62) 100%);
  --glass: linear-gradient(160deg, rgba(38, 78, 100, 0.66) 0%, rgba(13, 35, 48, 0.78) 100%);
  --glass-flat: rgba(14, 40, 54, 0.72);
  --pearl-sheen: linear-gradient(160deg, #2a5670 0%, #1a3e52 45%, #12303f 100%);  /* 次要面：深藍亮面 */
  --pearl-device: linear-gradient(160deg, #ffffff 0%, #f2f2f0 38%, #e2e0dc 70%, var(--c-warm-hi) 100%); /* 手機機背：亮銀帶暖 */
  --c-mist: var(--c-navy-800);   /* 舊名相容：淺灰底 → 深藍底 */
  /* 天空藍膠囊：上緣 0～22% 是取樣反光（#85bcfe→#3f97ff），字底 26% 以下壓深到 #1a66da 以下，白字實測 ≥4.5 */
  --sky-pill: linear-gradient(180deg, #6aaeff 0%, #3f97ff 12%, #1a66da 28%, #175fd0 70%, #1356c2 100%);
  --sky-pill-hover: linear-gradient(180deg, #85bcfe 0%, #4a9dff 12%, #1c6be0 28%, #1862d4 70%, #145ac8 100%);
  --sky-solid: linear-gradient(180deg, #1c6be0 0%, #1660d2 100%);   /* 小膠囊（字佔滿高度）用：整塊都夠深 */
  --glass-base: linear-gradient(rgba(9, 26, 36, 0.93), rgba(9, 26, 36, 0.93));  /* 墊在玻璃下，擋住亮銀邊框層透上來 */
  --sky-screen: linear-gradient(180deg, var(--c-sky-screen) 0%, #c9d4d8 42%, var(--c-haze) 62%, var(--c-sand) 100%);
  --sand-ramp: linear-gradient(180deg, var(--c-sand) 0%, #cbb8a2 55%, var(--c-sand-shadow) 100%);

  /* ---------- 3. 字體與字級（5 檔） ---------- */
  --font-sans: "Noto Sans TC", "PingFang TC", "Heiti TC", system-ui, sans-serif;
  --font-num: "Inter", "Noto Sans TC", system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.2rem + 4.2vw, 5rem);   /* 40→80 */
  --fs-title: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); /* 26→40 */
  --fs-heading: 1.25rem;                                /* 20 */
  --fs-body: 1rem;                                      /* 16 */
  --fs-small: 0.8125rem;                                /* 13 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-title: -0.02em;

  /* ---------- 4. 間距（4 為基數） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 160px;
  --gutter: clamp(16px, 4vw, 56px);

  /* ---------- 5. 圓角 ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---------- 6. 陰影分層（深底：陰影更深、加一點藍） ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 8, 14, 0.4), 0 2px 6px rgba(0, 8, 14, 0.3);
  --shadow-2: 0 2px 4px rgba(0, 8, 14, 0.35), 0 14px 30px -8px rgba(0, 8, 14, 0.6);
  --shadow-3: 0 4px 8px rgba(0, 8, 14, 0.4), 0 30px 60px -18px rgba(0, 8, 14, 0.75);
  --shadow-device: 0 40px 80px -30px rgba(0, 6, 12, 0.85), 0 12px 24px -12px rgba(0, 6, 12, 0.6);
  --inset-metal: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --glow-sky: 0 10px 28px -10px rgba(46, 141, 254, 0.7);

  /* ---------- 7. 緩動與時長 ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-hinge: cubic-bezier(0.34, 1.18, 0.5, 1);   /* 鉸鏈：輕微回彈 */
  --dur-press: 140ms;
  --dur-fast: 200ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-hinge: 900ms;

  /* ---------- 8. 層級 ---------- */
  --z-bar: 50;
  --z-toast: 80;
  --z-dialog: 90;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-fast: 120ms;
    --dur-base: 120ms;
    --dur-slow: 160ms;
    --dur-hinge: 0ms;
  }
}