/* デザイントークン（ソフト・ニューモーフィズム v2）。色・影・角丸・余白はここで1か所だけ決める。
   ほかの CSS はこの変数を使い、色を直書きしない（種別の色 --c は DB の値なので例外）。
   全ページ（閲覧・管理・生徒用）が最初に読み込む。 */
:root {
  /* 背景とカードは同じ色。奥行きは影だけで出す */
  --bg: #EDF0F7;
  --surface: #EDF0F7;
  --shadow-hi: #FFFFFF;
  --shadow-lo: #C8CFDF;
  --raise:    6px 6px 14px var(--shadow-lo), -6px -6px 14px var(--shadow-hi);   /* カード */
  --raise-sm: 3px 3px 8px var(--shadow-lo), -3px -3px 8px var(--shadow-hi);     /* ボタン・ピル・ロゴ */
  --inset:    inset 3px 3px 7px var(--shadow-lo), inset -3px -3px 7px var(--shadow-hi); /* 入力・ドロップゾーン・選択中メニュー */

  /* 文字・アクセント */
  --text: #252B3B;
  --text-sub: #5A6178;
  --primary: #5B4BE0;
  --primary-grad: linear-gradient(135deg, #6A5BEA, #5442D6);
  --on-primary: #FFFFFF;
  --primary-shadow: 4px 4px 10px rgba(91, 75, 224, .35), -4px -4px 10px #FFFFFF;

  /* ステータス（記号＋文字で出す）：● 成功 / ◐ 処理中 / ✕ 失敗 */
  --ok-fg: #1E7A3E;  --ok-bg: #E3F3E8;
  --run-fg: #2F5FC4; --run-bg: #E4ECFB;
  --err-fg: #B42323; --err-bg: #FBE6E6;

  /* 上部の黄色い通知バナー */
  --banner-bg: #FFF6E0;
  --banner-fg: #7A4B00;

  /* 生徒用ページの猫の飾り */
  --cat-shadow: rgba(60, 40, 20, .25);
  --paw: #F7A1B0;

  /* 線 */
  --field-border: #7A8399;   /* 入力欄の 1px 線（影だけだと見えないので必須） */
  --row-line: #DCE1EC;
  --card-edge: 1px solid rgba(255, 255, 255, .6);

  /* 角丸 */
  --r-card: 24px;
  --r-btn: 14px;
  --r-input: 12px;
  --r-drop: 18px;
  --r-pill: 999px;

  /* 余白 */
  --card-pad: 28px 32px;
  --card-gap: 28px;

  /* 文字サイズ（最小 16px。Laura の最終値） */
  --fs-page: 30px;     /* ページ見出し 太字 */
  --fs-section: 22px;  /* セクション見出し 太字 */
  --fs-body: 18px;     /* 本文・説明・表のセル・ラベル(太字) */
  --fs-field: 19px;    /* 入力欄・ボタン(太字)・メニュー */
  --fs-small: 16px;    /* 表ヘッダー・ピル・補足 */
  --pill-h: 34px;
  --row-h: 64px;
  --control-h: 52px;   /* 入力欄・primary ボタンの高さ */
  --input-max: 420px;  /* 入力欄の幅の上限 */
  --sidebar-w: 280px;

  --font: "Inter", "Noto Sans JP", "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --focus: 2px solid var(--primary);
}