/* 設計系統 token 定義。本檔只有變數，沒有任何選擇器樣式。 */
:root {
  /* 間距階 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 字級階（rem，基準 16px） */
  --font-size-xs: 0.75rem;   /* 12px 單位、標籤 */
  --font-size-sm: 0.875rem;  /* 14px 次要文字 */
  --font-size-md: 1rem;      /* 16px 內文、所有輸入框 */
  --font-size-lg: 1.25rem;   /* 20px 區塊標題 */
  --font-size-xl: 1.5rem;    /* 24px 畫面標題 */
  --font-size-2xl: 2rem;     /* 32px 環圈中央的大數字 */
  --line-height-tight: 1.25;
  --line-height-base: 1.6;

  /* 圓角 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* 動畫 */
  --duration-fast: 120ms;   /* 按下回饋 */
  --duration-base: 200ms;   /* sheet 滑入、toast */
  --duration-slow: 320ms;   /* 環圈數值變化 */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* 尺寸 */
  --tap-target-min: 44px;
  --ring-thickness: 12px;
  --content-max-width: 640px;

  /* 淺色色彩階 */
  --color-bg: #fbfbfa;
  --color-surface: #ffffff;
  --color-surface-2: #f2f2f0;
  --color-border: #e0e0dc;
  --color-text: #1a1a18;
  --color-text-muted: #6b6b66;
  --color-accent: #2f6f4f;
  --color-primary: var(--color-accent);
  --color-accent-weak: #e6f0ea;
  --color-on-accent: #ffffff;
  --color-warn: #85580a;
  --color-warn-weak: #faf1de;
  --color-danger: #a33a2e;
  --color-protein: #3d6ea8;
  --color-carb: #c08a2e;
  --color-fat: #8a5aa8;
  --color-focus: #2f6f4f;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 深色色彩階：只覆寫顏色 token，間距字級圓角尺寸維持不變 */
    --color-bg: #141414;
    --color-surface: #1e1e1e;
    --color-surface-2: #2a2a2a;
    --color-border: #3a3a3a;
    --color-text: #f0f0ee;
    --color-text-muted: #a0a09a;
    --color-accent: #5aa87c;
    --color-primary: var(--color-accent);
    --color-accent-weak: #20342a;
    --color-on-accent: #0f1a14;
    --color-warn: #d9a441;
    --color-warn-weak: #33280f;
    --color-danger: #e0705f;
    --color-protein: #7aa8d9;
    --color-carb: #dcb15e;
    --color-fat: #b18ad4;
    --color-focus: #7ac49a;
  }
}