/* デザイントークン。正本は common/design-md/highdef-tool.md
   対外用の highdef.md ではない（角丸0・影なし・黒ベタは本アプリでは無効） */
:root {
  /* Brand（highdef.md から継承） */
  --primary: #3F456F;
  --primary-hover: #343A5E;
  --primary-weak: #ECEEF4;
  --primary-line: #C9CCDD;

  /* Ink — 温度のある黒。純粋な無彩色を使わない */
  --ink-strong: #2A2724;
  --ink: #43403B;
  --ink-sub: #6B655D;
  --ink-muted: #8A837A;
  --ink-disabled: #B5AEA4;
  --ink-inverse: #FFFFFF;

  /* Surface — 温かいオフホワイト */
  --bg: #F7F5F2;
  --surface: #FFFFFF;
  --surface-sunken: #FBFAF8;
  --surface-head: #F2EFE9;
  --line: #EDE8E1;
  --line-strong: #D9D2C7;

  /* Semantic */
  --success: #2E7D4F;
  --success-ink: #256B42;
  --success-bg: #EDF3EE;
  --success-line: #CFE2D4;
  --danger: #C4283C;
  --danger-ink: #A81F31;
  --danger-bg: #FBEEF0;
  --danger-line: #EFCDD3;
  --warning: #C98A1B;
  --warning-ink: #8A5A00;
  --warning-bg: #FCF4E6;
  --warning-line: #EBD7AE;
  --info: #3F456F;
  --info-bg: #ECEEF4;
  --info-line: #C9CCDD;

  /* 打刻の状態色。色だけで意味を伝えず、ドット＋日本語ラベルを必ず伴う */
  --state-idle: #8A837A;
  --state-active: #2E7D4F;
  --state-paused: #C98A1B;
  --state-done: #3F456F;

  --focus-ring: #3F456F;

  /* Typography */
  --font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", YuGothic, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-display: 52px;  /* 時計・主要数値。weight 300 で置く */
  --fs-lead: 22px;
  --fs-title: 20px;
  --fs-body-sp: 17px;
  --fs-body: 16px;
  --fs-sub: 15px;
  --fs-note: 13px;
  --fs-label: 11px;

  --lh-tight: 1.15;
  --lh-ui: 1.6;
  --lh-text: 1.8;
  --ls-heading: 0.01em;

  /* Spacing（8pxベース） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 40px;
  --sp-7: 56px;

  /* Radius — pill は状態バッジ専用。それ以外に使わない */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --tap-min: 44px;
  --tap: 56px;
  --tap-primary: 92px;

  --container-sp: 600px;
  --container-pc: 1200px;
  --sidebar: 150px;

  --border: 1px;
  --border-strong: 2px;
  --border-alert: 4px;

  /* 影は2段構成。色は黒ではなくインクで落とす */
  --shadow-card: 0 1px 2px rgba(42, 39, 36, .04), 0 4px 14px rgba(42, 39, 36, .045);
  --shadow-primary: 0 1px 2px rgba(63, 69, 111, .28), 0 6px 16px rgba(63, 69, 111, .24);
  --shadow-sticky: 0 -2px 12px rgba(42, 39, 36, .06);
  --shadow-modal: 0 8px 32px rgba(42, 39, 36, .12);
  --z-sticky: 10;
  --z-toast: 20;
  --z-modal: 30;

  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, 0, .2, 1);
}

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