/**
 * 設計 Token — 全域 CSS 變數
 * ============================================
 * 【2026-08-04 UI 全面改版：Apple 風 × 瑞境品牌色】
 *
 * 設計語彙（參考 Apple HIG / macOS Sonoma / iOS 18）：
 *   ・畫布是淺灰，內容是浮起來的白色圓角面板（不是白底切線）
 *   ・大圓角、極柔擴散陰影、幾乎不用 1px 邊框
 *   ・控制項一律膠囊化（segmented control、filter chip、按鈕）
 *   ・毛玻璃（backdrop-filter）用在 topbar / sidebar / modal 這種浮層
 *   ・柔和粉彩點綴色只用在標籤與狀態，介面骨架維持中性
 *
 * 配色：
 *   主色  #334E5A — 品牌主色（按鈕、標題、active、強調）— 不變
 *   文字  #35414A — 內文（比舊版帶一點藍，跟主色同溫層）
 *   畫布  #EFF1F3 — App 背景（淺灰，讓白卡片浮起來）
 *   面板  #FFFFFF — 卡片 / 側欄 / 內容區
 *
 * 字體：
 *   英數：Apple 系統字（SF Pro）→ Windows 退到 Segoe UI Variable
 *   中文：Noto Sans TC
 */

:root {
  /* ---------- 主色（品牌，維持不變） ---------- */
  --color-primary:    #334E5A;  /* 主色 */
  --color-primary-dk: #243842;  /* hover / pressed */
  --color-primary-lt: #4D6877;  /* disabled / subdued */

  --color-primary-tint-1: rgba(51, 78, 90, 0.045); /* 極淺背景 */
  --color-primary-tint-2: rgba(51, 78, 90, 0.085); /* hover 底色 */
  --color-primary-tint-3: rgba(51, 78, 90, 0.18);  /* focus ring */
  --color-primary-tint-4: rgba(51, 78, 90, 0.14);  /* active pill 底 */

  /* ---------- 機能色 ---------- */
  --color-canvas:     #EFF1F3;  /* App 畫布（淺灰）— 新增 */
  --color-canvas-2:   #E8EBEE;  /* 畫布更深一階（sidebar 外側漸層） */
  --color-bg:         #FFFFFF;  /* 內容底（沿用舊名，避免既有樣式壞掉） */
  --color-surface:    #FFFFFF;  /* 卡片 */
  --color-surface-2:  #F5F7F8;  /* 內嵌區塊 / 輸入框底 */
  --color-surface-3:  #EDF0F2;  /* 更內層（seg 底、skeleton） */

  --color-text:       #35414A;  /* 文字 主色 */
  --color-text-mute:  #7C8891;  /* 次要文字 */
  --color-text-dim:   #A8B2B9;
  --color-text-on-dark: #FFFFFF;

  --color-border:     #E7EAEC;
  --color-border-dk:  #D5DADE;
  --color-divider:    #EFF2F4;

  /* 狀態色（pill / 圖示用，介面 chrome 不用） */
  --color-success:    #3F8B65;
  --color-warning:    #C97A2D;
  --color-danger:     #C0554A;
  --color-info:       #3F6B8B;

  /* ---------- 柔和粉彩點綴（參考圖的日程 chip） ----------
     只用於標籤、圖示底、活動色塊；介面骨架不使用 */
  --tint-sky:      #E4EEF6;  --tint-sky-fg:      #3A6E92;
  --tint-mint:     #E0F0E8;  --tint-mint-fg:     #35785A;
  --tint-lavender: #EBE8F6;  --tint-lavender-fg: #5B5487;
  --tint-peach:    #FAEBDA;  --tint-peach-fg:    #A66A2E;
  --tint-rose:     #F8E5E4;  --tint-rose-fg:     #A2534A;
  --tint-slate:    #E9ECEF;  --tint-slate-fg:    #5C6B75;

  /* ---------- 字體 ---------- */
  /* 英數走系統字（Mac=SF Pro、Win=Segoe UI Variable），中文走 Noto Sans TC。
     順序很重要：系統字放前面，CJK 字元才會 fallback 到 Noto Sans TC。 */
  --font-body:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display",
    "Segoe UI Variable Text", "Segoe UI",
    "Noto Sans TC",
    "Taipei Sans TC Beta",
    system-ui, "Helvetica Neue", Arial,
    "PingFang TC", "Microsoft JhengHei", "微軟正黑體",
    sans-serif;

  /* 大標用 Display 版（字腔較緊，Apple 大標的味道） */
  --font-display:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI",
    "Noto Sans TC",
    system-ui, "Helvetica Neue", Arial,
    "PingFang TC", "Microsoft JhengHei",
    sans-serif;

  /* 數字（金額、統計）用等寬數字，變動時不跳動 */
  --font-num: var(--font-display);

  /* ---------- 字級（對齊 Apple 的 type scale） ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-xxl:  30px;
  --fs-xxxl: 40px;

  /* 字重 */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 行高 */
  --lh-tight: 1.28;
  --lh-base:  1.65;
  --lh-loose: 1.85;

  /* 字距（Apple 大標是負字距，小字是正字距） */
  --ls-display: -0.02em;
  --ls-title:   -0.01em;
  --ls-body:    0;
  --ls-caption: 0.03em;
  --ls-label:   0.08em;

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

  /* ---------- 圓角（Apple 的連續圓角感：整體加大一階） ---------- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---------- 陰影（極柔、大擴散、低透明度 — 取代邊框） ---------- */
  --shadow-xs: 0 1px 2px rgba(23, 38, 46, 0.04);
  --shadow-sm: 0 1px 2px rgba(23, 38, 46, 0.04), 0 4px 12px rgba(23, 38, 46, 0.045);
  --shadow:    0 1px 2px rgba(23, 38, 46, 0.04), 0 8px 24px rgba(23, 38, 46, 0.06);
  --shadow-md: 0 2px 4px rgba(23, 38, 46, 0.04), 0 14px 34px rgba(23, 38, 46, 0.085);
  --shadow-lg: 0 4px 8px rgba(23, 38, 46, 0.05), 0 26px 60px rgba(23, 38, 46, 0.13);
  --shadow-xl: 0 8px 16px rgba(23, 38, 46, 0.06), 0 40px 90px rgba(23, 38, 46, 0.18);
  --shadow-primary: 0 8px 22px rgba(51, 78, 90, 0.28); /* 主色按鈕 hover */
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* 毛玻璃 */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-bg-sm:  rgba(255, 255, 255, 0.86);
  --glass-blur:   saturate(180%) blur(20px);
  --glass-border: rgba(255, 255, 255, 0.6);

  /* ---------- 動畫（Apple 的曲線：快進、慢出、無彈跳） ---------- */
  --transition-fast:  120ms cubic-bezier(0.32, 0.72, 0, 1);
  --transition:       220ms cubic-bezier(0.32, 0.72, 0, 1);
  --transition-slow:  380ms cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-back:    cubic-bezier(0.34, 1.4, 0.64, 1);  /* 微反彈 */
  --ease-emphasized:  cubic-bezier(0.32, 0.72, 0, 1);    /* Apple spring 近似 */
  --ease-spring:      cubic-bezier(0.2, 0.9, 0.25, 1.05);

  /* ---------- 版面尺寸 ---------- */
  --sidebar-w-tablet:  228px;
  --sidebar-w-desktop: 256px;
  --bottom-nav-h:      64px;
  --topbar-h:          64px;
  --content-max-w:    1280px;
  --shell-gap:        10px;   /* 浮起面板之間的縫隙 */
}