/*
 * 設計 token：顏色、字型、尺寸、動態。元件只引用這裡的變數。
 * 色場（field）：淺灰（Apple 的 #f5f5f7）、白、黑。每個色場自帶一組角色。強調色只有一個藍色。
 */
:root {
  /* 原色：參考 Apple 主視覺（白、淺灰 #f5f5f7、黑、單一藍色） */
  --mist: #f5f5f7;
  --mist-2: #e8e8ed;
  --black: #000000;
  --black-2: #1d1d1f;
  --blue: #0071e3;
  --blue-text: #0066cc;
  --blue-bright: #2997ff;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --ink-dark: #1d1d1f;
  --ink-dark-soft: #6e6e73;

  /* 字型：拉丁字與數字用 Bricolage Grotesque，中文落到系統黑體 */
  --font: "Bricolage Grotesque", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;

  /* 字級：五階 */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.125rem, 1.05rem + 0.2vw, 1.1875rem);
  --step-statement: clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem);
  --step-head: clamp(2.25rem, 3.6vw, 3.75rem);
  --step-display: clamp(2.75rem, 0.8rem + 6.6vw, 7.5rem);

  /* 版面 */
  --margin: clamp(16px, 2.4vw, 32px);
  --gutter: clamp(16px, 1.8vw, 24px);
  --section: clamp(80px, 9vw, 150px);
  --radius: 4px;

  /* 動態 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --stagger-item: 70ms;

  /* 層級 */
  --z-sheet: 100;
  --z-toast: 110;
}

/* 色場：每個都定義同一組角色名稱 */
.field-mist {
  --bg: var(--mist);
  --surface: #ffffff;
  --ink: var(--ink-dark);
  --soft: var(--ink-dark-soft);
  --accent: var(--blue);
  --accent-ink: #ffffff;
  --accent-text: var(--blue-text);
  --focus: var(--blue);
}

.field-paper {
  --bg: var(--paper);
  --surface: var(--paper-2);
  --ink: var(--ink-dark);
  --soft: var(--ink-dark-soft);
  --accent: var(--blue);
  --accent-ink: #ffffff;
  --accent-text: var(--blue-text);
  --focus: var(--blue);
}

.field-char {
  --bg: var(--black);
  --surface: var(--black-2);
  --ink: #f5f5f7;
  --soft: #a1a1a6;
  --accent: var(--blue);
  --accent-ink: #ffffff;
  --accent-text: var(--blue-bright);
  --focus: var(--blue-bright);
}

/* 深色模式：白與淺灰色場換成深色，黑色場不變 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mist: #161617;
    --paper: #000000;
    --paper-2: #1d1d1f;
    --ink-dark: #f5f5f7;
    --ink-dark-soft: #a1a1a6;
  }
  :root:not([data-theme="light"]) .field-mist {
    --surface: #1d1d1f;
  }
  :root:not([data-theme="light"]) .field-paper,
  :root:not([data-theme="light"]) .field-mist {
    --accent-text: var(--blue-bright);
    --focus: var(--blue-bright);
  }
}

:root[data-theme="dark"] {
  --mist: #161617;
  --paper: #000000;
  --paper-2: #1d1d1f;
  --ink-dark: #f5f5f7;
  --ink-dark-soft: #a1a1a6;
}

:root[data-theme="dark"] .field-mist {
  --surface: #1d1d1f;
}

:root[data-theme="dark"] .field-paper,
:root[data-theme="dark"] .field-mist {
  --accent-text: var(--blue-bright);
  --focus: var(--blue-bright);
}