/* ============================================================================
   設計 token — 全站唯一的顏色 / 字級 / 間距 / 動效來源
   規格：docs/superpowers/specs/2026-08-24-marketing-website-design.md

   顏色只在這個檔案裡定義。任何頁面或元件都不准寫死色碼 —— 要新色就在這裡加，
   並且跑過對比檢查（見下方註記），不靠目測。
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- 中性 ------------------------------------------------------------ */
  --c-bg:          #0B0A08;   /* 頁面底 */
  --c-bg-2:        #100F0C;   /* 交錯區塊底 */
  --c-surface:     #151411;   /* 卡片 */
  --c-surface-2:   #201E1A;   /* 卡片內凹 / hover */
  --c-surface-3:   #2C2A25;   /* 再上一層 / 分隔塊 */
  --c-line:        #282621;   /* 細線 */
  --c-line-strong: #3D3A34;   /* hover 邊框 */

  /* 文字。對 --c-surface 的實測對比：
     text 15.74:1、text-2 7.09:1、text-3 4.84:1 —— 全數通過 WCAG AA。
     text-3 原訂 #6E6E76 只有 3.64:1，達不到 AA，已上調。
     2026-08-25 中性色加了金色色偏（亮度以二分法配平，比值不變）。 */
  --c-text:        #EEEDEC;
  --c-text-2:      #A3A09A;
  --c-text-3:      #878378;

  /* ---- 品牌金 ---------------------------------------------------------- */
  --c-gold-300:    #FFE08A;
  --c-gold-400:    #F0C65C;   /* 深底上的文字用這個（11.33:1） */
  --c-gold-500:    #D4A017;   /* 主色（7.75:1） */
  --c-gold-600:    #A87C10;
  --c-gold-700:    #7A5A0B;
  --c-gold-wash:   rgba(212, 160, 23, .12);
  --c-gold-line:   rgba(212, 160, 23, .32);

  /* 金屬感漸層 —— 亮邊在左上、暗面在右下，模擬金條受光。
     純色的金看起來像芥末黃，要有明暗轉折才像金屬。 */
  --g-metal: linear-gradient(135deg,
              #FFF0BE  0%,
              #F0C65C 22%,
              #D4A017 48%,
              #A87C10 72%,
              #F0C65C 100%);
  --g-metal-soft: linear-gradient(135deg, var(--c-gold-300), var(--c-gold-500) 60%, var(--c-gold-600));

  /* ---- 漲跌（業界慣例，勿改） ------------------------------------------- */
  --c-up:          #089981;
  --c-up-2:        #22AB94;   /* 深底上的文字用這個 */
  --c-up-wash:     rgba(8, 153, 129, .12);
  --c-down:        #F23645;
  --c-down-2:      #F7525F;
  --c-down-wash:   rgba(242, 54, 69, .12);

  /* ---- 方案分色 -------------------------------------------------------- */
  --c-plan-free:    #FFFFFF;
  --c-plan-plus:    #3179F5;
  --c-plan-pro:     #A855F7;
  --c-plan-premium: #F0C65C;

  /* ---- 字型 ------------------------------------------------------------ */
  /* Archivo 取代 Manrope：Manrope 是幾何調皮的，跟 Noto Sans TC 的方正中性
     對不上（長闊比、灰度、轉角特徵都不同），而且它跟 Inter / Space Grotesk
     同屬 AI landing page 的預設選擇。Archivo 是方正的 grotesque，比例接近
     Noto，數字也好看 —— 那是交易網站最常被盯著看的東西。 */
  --f-display: 'Archivo', 'Chiron Hei HK', 'PingFang TC', system-ui, sans-serif;
  /* 昭源黑體：基於思源黑體改良，字形更貼近繁中印刷慣例。
     自架子集（scripts/build-webfont.py），只含站上用得到的字。
     後面接系統字型 —— 子集萬一漏字，會落到平台字型而不是豆腐格。 */
  --f-sans:    'Chiron Hei HK', -apple-system, BlinkMacSystemFont,
               'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
               Menlo, Consolas, monospace;

  /* ---- 字級 ------------------------------------------------------------
     這組數字是從 tw.tradingview.com 的 CSS 量出來的，不是憑感覺訂的：
     段落主標 phone 40px → desktop 100px，line-height 等於字級（也就是 1.0），
     副標 18px → 24px。第一版我用 48px/18px，小了將近一半，
     整頁看起來就像模板填空。 */
  --t-10: .625rem;  --t-11: .6875rem; --t-12: .75rem;  --t-13: .8125rem;
  --t-14: .875rem;  --t-15: .9375rem; --t-16: 1rem;    --t-18: 1.125rem;
  --t-20: 1.25rem;  --t-22: 1.375rem; --t-24: 1.5rem;  --t-28: 1.75rem;
  --t-32: 2rem;     --t-36: 2.25rem;  --t-40: 2.5rem;  --t-48: 3rem;

  /* 大標用 clamp，斷點之間平滑過渡，不會在 769px 那一刻突然跳一級 */
  --t-hero:    clamp(2.5rem,  7.2vw, 5.75rem);   /* 40 → 92px */
  --t-section: clamp(2.125rem, 5.6vw, 4.5rem);   /* 34 → 72px */
  --t-feature: clamp(1.5rem,  2.4vw, 2.25rem);   /* 24 → 36px */
  --t-lede:    clamp(1.0625rem, 1.4vw, 1.5rem);  /* 17 → 24px */

  /* ---- 垂直節奏 ---------------------------------------------------------
     TradingView 的 --v-rhythm-spacing。手機到桌機各一組，
     媒體查詢在檔案最下面統一覆寫。 */
  --v-1: 80px;   /* 大段落之間 */
  --v-2: 64px;
  --v-3: 48px;
  --v-4: 48px;   /* 區塊內 */
  --v-5: 32px;   /* 元件內 */

  /* ---- 間距（8px 基準） ------------------------------------------------- */
  --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;  --s-10: 128px;

  /* ---- 圓角 ------------------------------------------------------------ */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 24px; --r-full: 999px;

  /* ---- 版面 ------------------------------------------------------------
     他們的主要內容區是 1480px，不是常見的 1200。窄容器是頁面顯得侷促、
     像後台管理介面的原因之一。 */
  --w-max:    1480px;
  --w-text:   1000px;   /* 純文字區塊（段落標題與說明）不跟著拉滿 */
  --w-narrow: 820px;
  --pad-x: 32px;
  --nav-h: 64px;

  /* ---- 陰影與光暈 ------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px -6px rgba(0,0,0,.6);
  --sh-3: 0 16px 48px -16px rgba(0,0,0,.8);
  --glow-gold: 0 0 0 1px var(--c-gold-line), 0 8px 32px -12px rgba(212,160,23,.45);

  /* ---- 動效 ------------------------------------------------------------ */
  --e-out:    cubic-bezier(.215, .61, .355, 1);
  --e-spring: cubic-bezier(.45, 1.45, .8, 1);
  --d-fast:   .12s;
  --d-base:   .2s;
  --d-slow:   .35s;
}

@media (min-width: 768px) {
  :root { --v-1: 120px; --v-2: 88px; --v-3: 64px; --v-4: 48px; --v-5: 32px; }
}
@media (min-width: 1024px) {
  :root { --v-1: 160px; --v-2: 120px; --v-3: 88px; --v-4: 64px; --v-5: 40px; }
}
@media (min-width: 1440px) {
  :root { --v-1: 200px; --v-2: 160px; --v-3: 120px; --v-4: 80px; --v-5: 48px; }
}
@media (max-width: 768px) {
  :root { --pad-x: 20px; }
}