/* =====================================================================
   WatchX Design Tokens · v1a
   ---------------------------------------------------------------------
   NavcorX(法人背書) // WatchX(App 系列) · slogan「Watch everything」
   --wx-* 為 WatchX 系列共用別名，全部引用自 NavcorX broadsheet --nx-* 基色，
   不新增任何色彩。未來 WatchX 期貨 / ETF / 美股 / 加密貨幣共用本檔。
   用法：<link rel="stylesheet" href="tokens.css">
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Serif+TC:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap");

:root {
  /* ---- 基色：NavcorX broadsheet 原生 token（勿改） ---- */
  --nx-bg:#0A0A0A;   --nx-bg-1:#111111; --nx-bg-2:#181818; --nx-bg-3:#1F1F1F;
  --nx-rule:#262626; --nx-rule-2:#353535;
  --nx-ink:#ECE6D7;  --nx-ink-2:#BDB6A5; --nx-muted:#6F6A5F; --nx-muted-2:#4A463E;
  --nx-amber:#FF9F1C;--nx-amber-soft:#FFB845; --nx-amber-edge:#C97A0E;
  --nx-green:#2FBE6E;--nx-red:#E8543D; --nx-cyan:#5AC8E0; --nx-violet:#B388FF;

  --nx-font-display:"Fraunces","Noto Serif TC",Georgia,serif;
  --nx-font-body:"Inter","Noto Sans TC",system-ui,sans-serif;
  --nx-font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;

  /* ---- WatchX 系列共用別名 ---- */
  --wx-bg:        var(--nx-bg);        /* 頁面底 */
  --wx-surface:   var(--nx-bg-1);      /* 卡片面 */
  --wx-surface-2: var(--nx-bg-2);      /* hover / raised */
  --wx-rule:      var(--nx-rule);
  --wx-rule-2:    var(--nx-rule-2);
  --wx-ink:       var(--nx-ink);
  --wx-ink-2:     var(--nx-ink-2);
  --wx-muted:     var(--nx-muted);
  --wx-muted-2:   var(--nx-muted-2);

  --wx-accent:      var(--nx-amber);       /* 唯一 CTA / 品牌色，跨產品線共用 */
  --wx-accent-soft: var(--nx-amber-soft);
  --wx-accent-edge: var(--nx-amber-edge);

  /* ---- 模組識別色：借用既有語意色，不創新色 ---- */
  --wx-mod-stock:   var(--wx-accent);  /* 股票（本次 v1a） */
  --wx-mod-futures: var(--wx-accent);  /* 期貨（未來） */
  --wx-mod-etf:     var(--nx-green);   /* ETF 分類強調（未來可用） */
  --wx-mod-us:      var(--nx-cyan);    /* 美股（未來） */
  --wx-mod-crypto:  var(--nx-violet);  /* 加密貨幣（未來） */

  /* ---- 台式漲跌色（紅上綠下），僅用於 PnL / 報價 ---- */
  /* [MOD][CC][20260818] CC_0818_03 全站漲跌配色改台式：紅=漲、綠=跌 */
  --wx-up:   var(--nx-red);
  --wx-down: var(--nx-green);

  /* ---- 字型別名 ---- */
  --wx-font-display: var(--nx-font-display);  /* Fraunces：標題 */
  --wx-font-body:    var(--nx-font-body);     /* Inter：內文 / UI */
  --wx-font-mono:    var(--nx-font-mono);     /* IBM Plex Mono：數字 / tag / header */

  /* ---- 版面斷點（供 CC 對照） ---- */
  --wx-bp-mobile: 390px;
  --wx-bp-desktop: 1180px;
}

/*
  未來產品線衍生範例（期貨）：
  .watchx-futures { --wx-mod-stock: var(--wx-mod-futures); }
  只覆寫模組識別色，其餘 token 全繼承，確保跨產品線視覺一致。
*/