/*
 * 自動產生，不要手改。
 *
 * 來源：scripts/check-contrast.mjs 的 THEMES 與 ELEVATION
 * 重新產生：npm run tokens
 *
 * 每一個色值都通過 WCAG 驗證（正文 4.5:1、UI 元件 3:1），見 npm run check:contrast。
 */

:root {
  color-scheme: light dark;

  --color-background: #F1F5F9;
  --color-foreground: #0F172A;
  --color-card: #FFFFFF;
  --color-card-foreground: #0F172A;
  --color-muted: #E2E8F0;
  --color-muted-foreground: #475569;
  --color-border: rgba(15,23,42,0.12);
  --color-input-border: #64748B;
  --color-primary: #1D4ED8;
  --color-on-primary: #FFFFFF;
  --color-accent: #047857;
  --color-on-accent: #FFFFFF;
  --color-destructive: #B91C1C;
  --color-on-destructive: #FFFFFF;
  --color-ring: #1D4ED8;
  --elevation-strategy: shadow;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.10);
  --color-hairline: rgba(15,23,42,0.08);

  /*
   * 字體：純系統堆疊，不載 webfont。
   *
   * ui-ux-pro-max 建議的 Fira / Inter 這類字體都沒有繁體中文字符，
   * 中文會 fallback 到系統字，造成中英文字重與行高不一致。
   * 用系統字則兩者由同一套字體渲染，度量一致，而且零位元組、離線可用、
   * 沒有字體載入時的版面跳動。
   *
   * 數字對齊靠 tabular-nums，不靠等寬字體，見 .tnum。
   */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC",
    "Helvetica Neue", Arial, sans-serif;

  /* 間距：4px 基準的等比級數。ui-ux-pro-max 的 density 5（標準）。 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* 字級：基準 16px，行高 1.5，符合 ux 規則 typography-base-size */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /*
   * 最小可點擊尺寸。ux 規則 touch-target-size 要求 44×44，
   * 這是 CRITICAL 等級，所有按鈕與連結都要達到。
   */
  --touch-min: 44px;

  /* 動畫：Minimalism 風格的 subtle hover 是 200-250ms */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 安全區域，給 iOS 的圓角與 home indicator */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* 跟隨系統 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-background: #0F172A;
    --color-foreground: #F8FAFC;
    --color-card: #1E293B;
    --color-card-foreground: #F8FAFC;
    --color-muted: #172033;
    --color-muted-foreground: #A0AEC0;
    --color-border: rgba(255,255,255,0.10);
    --color-input-border: #64748B;
    --color-primary: #60A5FA;
    --color-on-primary: #0F172A;
    --color-accent: #34D399;
    --color-on-accent: #0F172A;
    --color-destructive: #F87171;
    --color-on-destructive: #0F172A;
    --color-ring: #93C5FD;
    --elevation-strategy: fill;
    --shadow-card: none;
    --color-hairline: rgba(255,255,255,0.10);
  }
}

/* 使用者明確指定，優先於系統設定 */
:root[data-theme='dark'] {
  --color-background: #0F172A;
  --color-foreground: #F8FAFC;
  --color-card: #1E293B;
  --color-card-foreground: #F8FAFC;
  --color-muted: #172033;
  --color-muted-foreground: #A0AEC0;
  --color-border: rgba(255,255,255,0.10);
  --color-input-border: #64748B;
  --color-primary: #60A5FA;
  --color-on-primary: #0F172A;
  --color-accent: #34D399;
  --color-on-accent: #0F172A;
  --color-destructive: #F87171;
  --color-on-destructive: #0F172A;
  --color-ring: #93C5FD;
  --elevation-strategy: fill;
  --shadow-card: none;
  --color-hairline: rgba(255,255,255,0.10);
}

:root[data-theme='light'] {
  --color-background: #F1F5F9;
  --color-foreground: #0F172A;
  --color-card: #FFFFFF;
  --color-card-foreground: #0F172A;
  --color-muted: #E2E8F0;
  --color-muted-foreground: #475569;
  --color-border: rgba(15,23,42,0.12);
  --color-input-border: #64748B;
  --color-primary: #1D4ED8;
  --color-on-primary: #FFFFFF;
  --color-accent: #047857;
  --color-on-accent: #FFFFFF;
  --color-destructive: #B91C1C;
  --color-on-destructive: #FFFFFF;
  --color-ring: #1D4ED8;
  --elevation-strategy: shadow;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.10);
  --color-hairline: rgba(15,23,42,0.08);
}

/*
 * 尊重系統的減少動態設定。ux 規則列為必要項目。
 * 不是把動畫時間設成 0，而是設成 1ms：完全設 0 會讓某些 transitionend
 * 事件不觸發，依賴那個事件的邏輯會卡住。
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}