/* index-design-tokens.css  */
/* ===== 1. 主色彩／基礎設計色 ===== */
:root {
  --bg: #0e0f13;           /* 基底背景 */
  --card: #151821;         /* 區塊背景 */
  --muted: #8b93a7;        /* 輔助文字/非重點 */
  --text: #e9ecf1;         /* 主要文字 */
  --primary: #5b8cff;      /* 主要強調色 */
  --accent: #7fdbca;       /* 補強色（次強調） */
  --danger: #ff6b6b;
  --success: #35d49a;

  /* ===== 2. 通用外框/陰影/分隔色、box-shadow ===== */
  --ring: #2b3346;         /* 主要按鈕/輸入框框線 */
  --divider: #212635;      /* 分隔色 */
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  /* ===== 3. radius（圓角） ===== */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  /* ===== 4. Z-index 分層【一定要用語意名稱！】===== */
  --z-background: 1;       /* 最底層，背景圖用 */
  --z-content: 2;          /* 主要內容區塊（預設） */
  --z-nav: 100;            /* 導覽列 */
  --z-header: 120;         /* 頂部浮動（如果有） */
  --z-dropdown: 200;       /* 下拉選單、浮出子選單 */
  --z-tooltip: 300;        /* tooltip */
  --z-chat: 1000;          /* 聊天室 chatbox/chatlist */
  --z-modal: 2000;         /* 彈窗、遮罩 */
  --z-preloader: 3000;     /* preloader/loading遮罩 */

  /* ===== 5. 聊天列表容器高度 ===== */
  --list-min: 260px;
  --list-max: 80dvh;
  --list-init: 480px;

  /* ===== 6. 圓形選單(Circle Nav) 專用 ===== */
  /* 這幾個是 .circle-nav 特色設計，可以直接提供 default（用於js可調） */
  --circle-ring-inset: 3%;         /* 外彩虹環縮進 */
  --circle-ring-thickness: 22px;    /* 外環厚度 */
  --circle-hub-inset: 14%;          /* 中心圓縮進百分比 */
  --circle-radius: calc(min(640px, 92vw) / 2 - 72px); /* 按鈕半徑（可視大小自適應） */
  --circle-seg-w: clamp(110px, 30%, 180px);
  --circle-seg-h: clamp(40px, 7.5vw, 56px);
}

/* ===== 7. 響應式明亮主題覆寫 ===== */
@media (prefers-color-scheme: light) {
  :root {
    --card: #ffffff;
    --muted: #6b7280;
    --text: #0f172a;
    --primary: #3b82f6;
    --accent: #06b6d4;
    --danger: #ef4444;
    --success: #10b981;
    --ring: #e5e7eb;
    --divider: #eef1f6;
    --shadow: 0 10px 25px rgba(2,6,23,.08);
  }
}