/* tokens.css — 変数の宣言のみ。値は theme.js が :root に注入する。
   ここに書いてある値は、テーマ読み込み前の一瞬に使われる初期値。
   色・サイズの直値を他のCSSに書かないこと（デザイン差し替えの前提が壊れる）。 */

:root {
  /* 色（theme.js が上書きする） */
  --c-bg: #F7F8FA;
  --c-surface: #FFFFFF;
  --c-text: #1A1D23;
  --c-text-muted: #5B6472;
  --c-icon-weak: #8A93A2;
  --c-primary: #2F6FED;
  --c-on-primary: #FFFFFF;
  --c-accent: #12B886;
  --c-success-text: #0B7A5B;
  --c-danger: #E03131;
  --c-border: #E3E6EB;
  --c-divider: #EFF1F4;
  --c-chip-bg: #F1F3F7;

  /* 字 */
  --f-family: system-ui, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --f-scale: 1;
  --f-size-xs: calc(10px * var(--f-scale));
  --f-size-sm: calc(12px * var(--f-scale));
  --f-size-md: calc(14px * var(--f-scale));
  --f-size-lg: calc(17px * var(--f-scale));
  --f-size-xl: calc(22px * var(--f-scale));
  --f-size-stat: calc(26px * var(--f-scale));
  --f-size-display: calc(68px * var(--f-scale));
  --f-size-digit: 156px;

  /* 余白（4pxグリッド） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 56px;

  /* 角丸 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-full: 999px;

  /* 影 */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.10);

  /* 動き */
  --mo-fast: 120ms;
  --mo-base: 200ms;
  --mo-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* 画面寸法 */
  --tabbar-h: 76px;
  --screen-pad-top: 56px;
  --screen-pad-x: 20px;
  --gap-block: 20px;
  --btn-h: 58px;
  --key-h: 62px;
}

/* 小画面（375×667想定）— REQ-G01 */
@media (max-height: 719px) {
  :root {
    --tabbar-h: 64px;
    --screen-pad-top: 40px;
    --screen-pad-x: 16px;
    --gap-block: 12px;
    --btn-h: 56px;
    --key-h: 56px;
    --f-size-display: calc(52px * var(--f-scale));
    --f-size-digit: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-fast: 0ms;
    --mo-base: 0ms;
  }
}