/* ============================================================
   Design Tokens — 企業虛擬資產帳戶平台（淺色主題）
   全站唯一的顏色／字體／間距來源。要換主題只改這一支。

   分隔哲學：優先用「背景層次 + 留白 + 極淡陰影」區隔區塊，
   邊框只在表單控件與必要的 hairline 使用，避免框線感過重。
   ============================================================ */

:root {
  /* ── 背景層次 ───────────────────────────────── */
  --bg-base:        #f6f7f9;   /* 頁面底色 */
  --bg-panel:       #ffffff;   /* 卡片、面板、sidebar */
  --bg-panel-hover: #fafbfc;
  --bg-sunken:      #f1f3f7;   /* 表格 header、內凹區塊 */
  --bg-overlay:     rgba(24, 31, 46, .32);

  /* ── 分隔線（由淡到明）─────────────────────── */
  --divider:        #f0f2f6;   /* 表格內列分隔，幾乎不可見 */
  --border:         #e7eaf0;   /* 一般 hairline */
  --border-input:   #d9dee7;   /* 表單控件 */
  --border-strong:  #c5ccd8;   /* hover、強調 */

  /* ── 文字 ───────────────────────────────────── */
  --text:           #1a1f2e;
  --text-muted:     #5c6678;
  --text-subtle:    #8a93a5;

  /* ── 品牌／互動色 ───────────────────────────── */
  --accent:         #3b5bdb;
  --accent-hover:   #2f4bc4;
  --accent-soft:    #eef1fd;
  --accent-text:    #2f4bc4;

  /* ── 語意色（狀態、風險）───────────────────── */
  --ok:             #0f8a5f;
  --ok-soft:        #e7f6ef;
  --warn:           #a2680a;
  --warn-soft:      #fdf3e0;
  --danger:         #c93a3a;
  --danger-soft:    #fdecec;
  --info:           #2563a8;
  --info-soft:      #ebf3fc;

  /* ── 資產類別色 ─────────────────────────────── */
  --asset-fiat:       #6d4fc4;
  --asset-fiat-soft:  #f1edfc;
  --asset-stablecoin: #0f8a5f;
  --asset-stable-soft:#e7f6ef;
  --asset-crypto:     #a2680a;
  --asset-crypto-soft:#fdf3e0;

  /* ── 圖表 ───────────────────────────────────────
     每個資產給固定色，同一資產在圓餅、堆疊、走勢圖都是同一個顏色，
     使用者不必每張圖重讀圖例。序列色供非資產類的分類圖表使用。

     圖表色比語意色（--ok / --danger）明亮一個檔次：語意色要承載
     文字對比度，圖表色是大面積色塊，太深會讓整個 dashboard 顯得沉重。 */
  --c-twd:  #7c5cf0;
  --c-usd:  #a78bfa;
  --c-usdt: #16b981;
  --c-usdc: #2ed3a0;
  --c-btc:  #f59e0b;
  --c-eth:  #6b8afd;
  --c-sol:  #14c8c8;

  --chart-1: #4f74f5;
  --chart-2: #16b981;
  --chart-3: #f59e0b;
  --chart-4: #7c5cf0;
  --chart-5: #38a9e8;
  --chart-6: #f2647c;
  --chart-7: #14c8c8;
  --chart-8: #b06bd6;

  --chart-grid: #f0f2f7;   /* 格線：要能看見但不搶走資料的注意力 */
  --chart-axis: #9aa2b2;
  --chart-track:#f1f3f8;   /* 進度／量表的底槽 */
  --chart-up:   #16b981;
  --chart-down: #f2647c;

  /* 色塊之間的間隔與圓角：圓環、堆疊長條、比例條共用同一組數值，
     視覺節奏才會一致（單位 px，JS 也會讀這兩個值）*/
  --chart-seg-gap: 3px;
  --chart-seg-r:   4px;

  /* ── 字體 ───────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
          "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base:13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  /* ── 間距 ───────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ── 圓角 ───────────────────────────────────── */
  --r-sm: 5px;
  --r:    8px;
  --r-lg: 12px;

  /* ── 陰影（取代邊框的主要分隔手段）─────────── */
  --shadow-sm: 0 1px 2px rgba(24, 31, 46, .05);
  --shadow:    0 2px 8px rgba(24, 31, 46, .06);
  --shadow-md: 0 6px 20px rgba(24, 31, 46, .10);
  --shadow-lg: 0 16px 48px rgba(24, 31, 46, .16);
  --ring:      0 0 0 3px rgba(59, 91, 219, .14);

  /* ── 圖示（一律用 CSS／SVG 繪製，不使用 emoji）─ */
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a93a5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ── 疊層順序 ───────────────────────────────── */
  --z-dropdown: 50;
  --z-devbar:   100;
  --z-modal:    200;

  /* 控件高度：按鈕、dropdown、輸入框共用三個檔次，
     不靠 padding + line-height 湊高度 —— 那會算出 36.14px 這種小數，
     同一列的控件也就對不齊。 */
  --ctl-h:    36px;   /* 一般：按鈕、dropdown */
  --ctl-h-sm: 28px;   /* 小：篩選列 */
  --ctl-h-lg: 44px;   /* 大：表單欄位（.input / .dropdown-field）*/

  /* ── 版面尺寸 ───────────────────────────────── */
  --sidebar-w: 216px;
  --topbar-h:  56px;
  --devbar-h:  36px;
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

/* [hidden] 必須贏過元件自己的 display（.alert 是 flex、.card 是 block），
   否則「先寫好、預設隱藏」的區塊會全部露出來。 */
[hidden] { display: none !important; }

/* 等寬顯示：地址、TxHash、金額 */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }