/* 共通設定（SPEC-39）。色・文字・余白・ボタンの大きさ・角丸・画面幅の切替はここだけで決める。
   色は店のプライスボード（赤・紺・黄）から。本文は白地に濃い文字（コントラスト比4.5:1以上）。 */
:root {
  --cl-red: #e60012;        /* 店の帯・重要な警告 */
  --cl-red-text: #b0000f;   /* 白地の赤文字（エラー）：コントラスト 6.5:1 */
  --cl-navy: #1d2088;       /* 主操作・数字：白地で 11.9:1 */
  --cl-navy-soft: #e8e9f6;  /* 紺の薄い面 */
  --cl-yellow: #f7ed12;     /* 印・フォーカスだけに使う（文字色にはしない） */
  --cl-ink: #1a1a1a;        /* 本文 */
  --cl-ink-2: #4a4a5a;      /* 補足：白地で 8.5:1 */
  --cl-line: #c9cad6;       /* 区切り線 */
  --cl-paper: #ffffff;
  --cl-wash: #f3f3f7;       /* 背景の面 */
  --cl-ok: #0b6b2b;         /* 済の文字（色だけで区別せず必ず文字を併記） */

  --cl-font: 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  --cl-fs-body: 16px;       /* 本文16px以上（スマホ） */
  --cl-fs-small: 14px;
  --cl-fs-h1: 22px;
  --cl-fs-h2: 18px;
  --cl-fs-figure: 34px;     /* 経営の数字（ボードの数字に合わせて太く） */
  --cl-lh: 1.6;

  --cl-s1: 4px; --cl-s2: 8px; --cl-s3: 12px; --cl-s4: 16px; --cl-s5: 24px; --cl-s6: 32px;
  --cl-tap: 48px;           /* 主要操作の高さ（44px以上） */
  --cl-radius-control: 6px; /* 入力欄・ボタン */
  --cl-radius-sheet: 2px;   /* 面（帳票のように角を立てる） */
  --cl-focus: 0 0 0 3px var(--cl-yellow), 0 0 0 5px var(--cl-navy);
  --cl-content: 960px;
}