/**
 * 3C翔 UI — 設計變數（日間＋夜間）
 *
 * 用法：
 * - 新專案：直接引入，元件一律用 var(--ui-*)。
 * - 既有系統換皮：把 --ui- 換成專案前綴，:root 換成專案的 body class（例如 body.ca-skin）。
 * - 夜間模式：在 <html> 加 data-theme="dark"（或 .dark），變數會整組切換。
 * - 換品牌主色：只改 --ui-accent-src 一個值，其他主色相關的顏色會自動算出來。
 */

:root {
  /* 主色（品牌色）：只改這一個 */
  --ui-accent-src: #1d6fb8;

  --ui-accent: var(--ui-accent-src);
  --ui-accent-strong: color-mix(in srgb, var(--ui-accent-src) 82%, #000);
  --ui-accent-soft: color-mix(in srgb, var(--ui-accent-src) 9%, #fff);
  --ui-accent-border: color-mix(in srgb, var(--ui-accent-src) 35%, #fff);
  --ui-on-accent: #fff; /* 主色底上的文字 */

  /* 中性色 */
  --ui-bg: #f4f6f9;          /* 畫布 */
  --ui-sidebar: #f6f7f9;     /* 側欄底 */
  --ui-surface: #fff;        /* 卡片、頂部列、浮層 */
  --ui-surface-sunken: #f8f9fb; /* 表頭、次要區 */
  --ui-border: #e5e8ee;
  --ui-border-strong: #cfd6e0;  /* 滑過的卡片邊框 */
  --ui-input-border: #d5dae2;
  --ui-input: #fff;
  --ui-hover: #f2f4f7;
  --ui-text: #1f2633;
  --ui-muted: #6b7385;
  --ui-icon: #8a94a6;

  /* 深色搜尋膠囊 */
  --ui-pill-bg: #1f2633;
  --ui-pill-bg-hover: #000;
  --ui-pill-text: #fff;
  --ui-pill-muted: #c8cdd6;

  /* 狀態（膠囊標籤底色／文字） */
  --ui-neutral-bg: #f1f3f6;
  --ui-neutral-fg: #475467;
  --ui-warning-bg: #fef3c7;
  --ui-warning-fg: #92400e;
  --ui-warning-num: #b45309;
  --ui-danger-bg: #fee4e2;
  --ui-danger-fg: #b42318;
  --ui-danger-num: #b42318;
  --ui-success-bg: #dcfae6;
  --ui-success-fg: #067647;
  --ui-badge: #e5484d; /* 通知數字徽章 */

  /* 報表：圖表、漲跌、骨架 */
  --ui-chart-1: var(--ui-accent);   /* 主要數據 */
  --ui-chart-2: #b8c0cc;            /* 對照期間（虛線） */
  --ui-chart-area: color-mix(in srgb, var(--ui-accent-src) 10%, transparent);
  --ui-chart-grid: #eef0f4;
  --ui-chart-axis: #8a94a6;
  --ui-series-1: var(--ui-accent);  /* 多組數據時依序使用，最多 5 組 */
  --ui-series-2: #0e9384;
  --ui-series-3: #dc8a0d;
  --ui-series-4: #7a5af8;
  --ui-series-5: #e04f6d;
  --ui-skeleton: #eef0f4;
  --ui-skeleton-shine: #f7f8fa;

  /* 圓角 */
  --ui-radius-xs: 6px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 10px;
  --ui-radius: 12px;
  --ui-radius-pill: 999px;

  /* 陰影 */
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --ui-shadow-hover: 0 6px 18px -6px rgba(16, 24, 40, .14);
  --ui-shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);

  /* 尺寸 */
  --ui-bar-h: 48px;
  --ui-bar-h-mobile: 46px;
  --ui-sidebar-w: 200px;
  --ui-content-max: 1180px;

  /* 字型 */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  /* 動態 */
  --ui-ease: .12s ease;

  /* Lucide 線條圖示（mask 用，顏色由 background 決定） */
  --ui-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --ui-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ui-ico-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  --ui-ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  --ui-ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* 夜間模式：只換變數 */
:root[data-theme="dark"],
:root.dark {
  --ui-accent: color-mix(in srgb, var(--ui-accent-src) 78%, #fff);
  --ui-accent-strong: color-mix(in srgb, var(--ui-accent-src) 90%, #fff);
  --ui-accent-soft: color-mix(in srgb, var(--ui-accent-src) 22%, #171b23);
  --ui-accent-border: color-mix(in srgb, var(--ui-accent-src) 40%, #171b23);
  --ui-on-accent: #0f1218; /* 夜間主色較亮，字改深色 */

  --ui-bg: #0f1218;
  --ui-sidebar: #12161d;
  --ui-surface: #171b23;
  --ui-surface-sunken: #1b2029;
  --ui-border: #2a303b;
  --ui-border-strong: #3a4250;
  --ui-input-border: #343b48;
  --ui-input: #11151c;
  --ui-hover: #20252f;
  --ui-text: #e6e9ef;
  --ui-muted: #9aa3b2;
  --ui-icon: #7d8696;

  --ui-pill-bg: #20252f;
  --ui-pill-bg-hover: #2a303b;
  --ui-pill-text: #e6e9ef;
  --ui-pill-muted: #9aa3b2;

  --ui-neutral-bg: #232934;
  --ui-neutral-fg: #c3cad6;
  --ui-warning-bg: rgba(245, 176, 65, .16);
  --ui-warning-fg: #f5c46b;
  --ui-warning-num: #f5b041;
  --ui-danger-bg: rgba(249, 112, 102, .16);
  --ui-danger-fg: #f99a92;
  --ui-danger-num: #f97066;
  --ui-success-bg: rgba(50, 213, 131, .14);
  --ui-success-fg: #6ce9a6;

  --ui-chart-2: #4a5260;
  --ui-chart-area: color-mix(in srgb, var(--ui-accent-src) 22%, transparent);
  --ui-chart-grid: #232934;
  --ui-chart-axis: #7d8696;
  --ui-series-2: #2ec4b6;
  --ui-series-3: #f5b041;
  --ui-series-4: #a48afb;
  --ui-series-5: #f7849c;
  --ui-skeleton: #1d222b;
  --ui-skeleton-shine: #262c37;

  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --ui-shadow-hover: 0 6px 18px -6px rgba(0, 0, 0, .6);
  --ui-shadow-pop: 0 14px 36px -8px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .35);

  color-scheme: dark;
}