/* ============================================
   AI 編輯室 · Design Tokens
   --------------------------------------------
   所有顏色、字級、間距、圓角統一從這裡引用
   不要在元件裡硬編碼 hex 或 px
   ============================================ */

:root {
  /* ─── 主色 ─────────────────────────────── */
  --color-brand:        #3db5da;   /* mummy.com.tw 品牌藍 */
  --color-brand-hover:  #2a9bc4;   /* 按鈕 hover 用 */
  --color-brand-active: #1f87a8;   /* 按鈕按下時 */
  --color-brand-soft:   #E6F4F9;   /* 淺色底（chip 背景、selected state） */

  /* ─── 文字色 ───────────────────────────── */
  --color-text-primary:   #2C2C2A; /* 主文字、標題 */
  --color-text-secondary: #5F5E5A; /* 次要文字、說明 */
  --color-text-tertiary:  #888780; /* 提示、placeholder、label */
  --color-text-on-brand:  #FFFFFF; /* 在品牌色上的文字 */
  --color-text-link:      #185FA5; /* 連結色 */

  /* ─── 背景色 ───────────────────────────── */
  --color-bg-page:    #FAFAF7;     /* 整頁背景 */
  --color-bg-surface: #FFFFFF;     /* 卡片、表單背景 */
  --color-bg-muted:   #F1EFE8;     /* 區塊背景、tab bar 底 */
  --color-bg-hover:   #F5F4EE;     /* hover 時的微背景 */

  /* ─── 邊框色 ───────────────────────────── */
  --color-border:        rgba(0, 0, 0, 0.08); /* 預設邊框 */
  --color-border-strong: rgba(0, 0, 0, 0.15); /* 強調邊框（hover、focus） */
  --color-border-focus:  var(--color-brand);

  /* ─── 語意色（含背景） ─────────────────── */
  --color-success:    #0F6E56;
  --color-success-bg: #E1F5EE;
  --color-warning:    #BA7517;
  --color-warning-bg: #FAEEDA;
  --color-danger:     #A32D2D;
  --color-danger-bg:  #FCEBEB;
  --color-info:       #185FA5;
  --color-info-bg:    #E6F1FB;

  /* ─── 字型 ─────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas,
               "Source Code Pro", monospace;

  /* ─── 字級 ─────────────────────────────── */
  --text-xs:   11px;  /* 最小字、徽章 */
  --text-sm:   12px;  /* 次要標籤 */
  --text-base: 13px;  /* 表單 input、表格 */
  --text-md:   14px;  /* 一般介面文字、按鈕 */
  --text-lg:   16px;  /* 內文、卡片標題 */
  --text-xl:   18px;  /* h3 */
  --text-2xl:  22px;  /* h2、metric 數字 */
  --text-3xl:  28px;  /* h1 */

  /* ─── 行距 ─────────────────────────────── */
  --leading-tight:   1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ─── 字重（只用兩種） ─────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;

  /* ─── 間距（4 的倍數） ─────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── 圓角 ─────────────────────────────── */
  --radius-sm:   4px;     /* badge、tag */
  --radius-md:   8px;     /* 按鈕、輸入框、小卡片 */
  --radius-lg:   12px;    /* 大卡片、區塊 */
  --radius-xl:   16px;    /* 主要面板 */
  --radius-full: 9999px;  /* 圓形（avatar） */

  /* ─── 陰影（極簡使用） ─────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px rgba(61, 181, 218, 0.2);

  /* ─── 過場動畫 ─────────────────────────── */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── 版面寬度 ─────────────────────────── */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ─── 深色模式自動切換 ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary:   #F1EFE8;
    --color-text-secondary: #B4B2A9;
    --color-text-tertiary:  #888780;
    --color-text-on-brand:  #FFFFFF;
    --color-text-link:      #85B7EB;

    --color-bg-page:    #1A1A18;
    --color-bg-surface: #25251F;
    --color-bg-muted:   #2C2C2A;
    --color-bg-hover:   #33332C;

    --color-border:        rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.20);

    --color-success-bg: #0E2A22;
    --color-warning-bg: #2E2206;
    --color-danger-bg:  #2C1010;
    --color-info-bg:    #0C1F35;
  }
}

/* ─── 全站基礎樣式 ─────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  margin: 0;
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.7;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}