/* THEE GOOD SPOT のブランド（グローバルルール）
   ・色・書体は、ここ1か所で決める。画面のデザイン（portal.css）はこの値だけを使う
   ・差し色（--brand-accent）：いまは白黒（ごく薄いグレー）。地の帯・選んだ状態・お知らせの地に使う。差し色を入れるときは、この1行（と区切り線）を書き換える
   ・強調（ロゴ・日付の札・ボタン・黒い帯）は --brand-strong（黒）。文字は --brand-ink
   ・当てるのは THEE GOOD SPOT の画面（入口・SPOT・PLACE・MY SPOT・運営）と HOST／OWNER の管理画面だけ。スクール（教室予約）には当てない
   ・ライト／ダーク（2026-10-29 いちさん指示：白黒が逆転する）：はじめはライト。ヘッダーのボタンで切りかえ、その端末に覚える（html の data-theme="dark"）。
     色はこのファイルの札だけで決める（ダークの値は下の [data-theme="dark"]）。QR は読みやすさのため、どちらでも白地 */
:root {
  --brand-accent: #f6f6f6;        /* 差し色：いまは「なし（白黒）」＝ごく薄いグレー。ピンクに戻すなら #fff7fa */
  --brand-on-accent: #111111;     /* 差し色の上の文字 */
  --brand-accent-line: #e6e6e6;   /* 差し色の地の区切り線（ピンクのときは #f3dbe4） */

  --brand-strong: #111111;        /* 強調（ロゴ・日付の札・ボタン・黒い帯） */
  --brand-on-strong: #ffffff;
  --brand-dark: #1f1f1f;          /* 黒い帯・足もと */
  --brand-ink: #111111;           /* 文字 */
  --brand-ink-soft: #3f3f3f;
  --brand-muted: #777777;         /* 補助の文字（デザインシステム 2026-10-29） */
  --brand-ground: #ffffff;        /* 地 */
  --brand-paper: #ffffff;         /* カード */
  --brand-tint: #f5f5f5;          /* グレーの地・ホバー */
  --brand-line: #e5e5e5;          /* 区切りの線 */
  --brand-link: #111111;
  --brand-strong-hover: #333333;  /* 黒いボタンに乗ったとき */
  --brand-on-dark: #ffffff;       /* 黒い帯（足もと・しくみ）の文字 */
  --brand-on-dark-soft: #c9c9c9;
  --brand-dark-muted: #9a9a9a;
  --brand-dark-line: #3a3a3a;
  --brand-field: #ffffff;         /* 入力欄の地 */
  --brand-overlay: rgba(0, 0, 0, .4);
  --brand-veil: rgba(255, 255, 255, .8);
  --brand-ok-bg: #e9f7ee;   --brand-ok-ink: #0f5223;   --brand-ok-line: #1a7f37;
  --brand-warn-bg: #fdf3dc; --brand-warn-ink: #5c4300; --brand-warn-line: #e2c45c;
  --brand-ng-bg: #fdecec;   --brand-ng-ink: #8a1c1c;   --brand-ng-line: #c62828;
  --brand-info-bg: #e6f0fb; --brand-info-ink: #1d4f8c;
  --brand-danger: #c62828;  --brand-on-danger: #ffffff;

  --brand-font-display: "Montserrat", "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;   /* 見出し・英字（大文字） */
  --brand-font-body: "Noto Sans JP", "Hiragino Sans", "Zen Kaku Gothic New", "Meiryo", system-ui, sans-serif;          /* 本文（日本語・400〜500） */
  --brand-font-mono: "Montserrat", "Zen Kaku Gothic New", system-ui, sans-serif;                                       /* 小さなラベル・日付 */
  --brand-radius: 0px;            /* 角（四角） */
}

/* ダーク：白黒を逆転する（地は黒・文字と強調は白・黒い帯は白い帯に） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-accent: #1c1c1c;
  --brand-on-accent: #f2f2f2;
  --brand-accent-line: #303030;
  --brand-strong: #f2f2f2;
  --brand-on-strong: #111111;
  --brand-strong-hover: #cfcfcf;
  --brand-dark: #ececec;
  --brand-on-dark: #111111;
  --brand-on-dark-soft: #3f3f3f;
  --brand-dark-muted: #666666;
  --brand-dark-line: #c6c6c6;
  --brand-ink: #f2f2f2;
  --brand-ink-soft: #c6c6c6;
  --brand-muted: #8f8f8f;
  --brand-ground: #111111;
  --brand-paper: #111111;
  --brand-tint: #1c1c1c;
  --brand-line: #2f2f2f;
  --brand-link: #f2f2f2;
  --brand-field: #181818;
  --brand-overlay: rgba(0, 0, 0, .6);
  --brand-veil: rgba(17, 17, 17, .8);
  --brand-ok-bg: #10261a;   --brand-ok-ink: #8fd8a8;   --brand-ok-line: #3c9a5f;
  --brand-warn-bg: #2a2310; --brand-warn-ink: #f0d27a; --brand-warn-line: #9a7b25;
  --brand-ng-bg: #2c1515;   --brand-ng-ink: #f3a3a3;   --brand-ng-line: #c24a4a;
  --brand-info-bg: #12233a; --brand-info-ink: #9cc3f2;
  --brand-danger: #e05252;  --brand-on-danger: #111111;
  /* 共通のデザイン（app.css）の札も合わせる */
  --warn-soft: #2a2310; --ok-soft: #10261a; --ok: #8fd8a8; --danger-soft: #2c1515; --danger: #f3a3a3;
}