/* ==========================================================================
   配色: レッド × ネイビー(2026-10-04に正式採用) / Colors: Red x Navy (adopted 2026-10-04)
   参考: フランチャイズ元 mammaciao.com の色(赤・ネイビー・黄色の蛍光ペン・ニュートラルなグレー)。
   Based on the franchise brand colors of mammaciao.com (red, navy, highlighter yellow, neutral grey).
   緑とベージュは使っていない(LINEの公式ボタンだけ緑) / No green and no beige (only LINE's official button is green).

   稼働状況の色 / Status colors:  空き=クリーンブルー(水色寄りの青)  運転中=赤  異常=黄色  停止など=グレー
                                  idle=clean blue (aqua-leaning)  running=red  error=yellow  off=grey
   確認 / Check:  node tests/colors.mjs
   ========================================================================== */

:root {
  color-scheme: light;

  /* 面と文字 / Surfaces and text */
  --bg: #ffffff;
  --bg-alt: #f5f5f5;            /* 本家と同じニュートラルなグレー / the franchise site's neutral grey */
  --surface: #ffffff;
  --surface-2: #ececec;
  --text: #2b2b2b;
  --muted: #5b5b5b;
  --line: #dfdfdf;

  /* ブランド色 / Brand */
  --brand: #d5000f;             /* ボタン・リンク / buttons and links */
  --brand-ink: #ffffff;
  --accent: #0a1a8c;
  --focus: #0057d9;

  /* ヘッダー / Header */
  --header-bg: #c8000f;
  --header-fg: #ffffff;
  --header-muted: #ffffff;
  --header-hover: #a8000c;
  --header-line: #a8000c;

  /* ヒーロー(最上部の帯) / Hero band */
  --hero-bg: #e50111;
  --hero-fg: #ffffff;
  --hero-muted: #ffffff;
  --hero-chip-bg: #ffffff;
  --hero-chip-fg: #b8000d;
  --hero-chip-line: #ffffff;

  /* 飾り / Decoration */
  --marker: #fff834;
  --card-accent: #0a1a8c;       /* 料金カードの上端(ネイビー) / top edge of price cards (navy) */
  --footer-bg: #2b2b2b;
  --footer-fg: #d9d9d9;

  /* 稼働状況 / Machine status (文字色と背景は4.5:1以上。*-pill はラベルの塗り) */
  --idle-bg: #e2f2fc;   --idle-fg: #0a5a94;   --idle-line: #9fcdee;   --idle-pill-bg: #0b6cb8;  --idle-pill-fg: #ffffff;
  --run-bg: #ffe9ea;    --run-fg: #a80010;    --run-line: #f2b3b8;
  --err-bg: #fff9b8;    --err-fg: #5c4a00;    --err-line: #e8d94a;    --err-pill-bg: #2b2b2b;   --err-pill-fg: #fff834;
  --off-bg: #f0f0f0;    --off-fg: #5b5b5b;    --off-line: #dcdcdc;

  --line-green: #06c755;        /* LINEのブランド色(LINEの公式ボタンなので緑のまま) / LINE brand green, kept as the official button color */
  --line-ink: #04260f;

  --radius: 20px;
  --radius-lg: 32px;
  --shadow: 0 2px 4px rgb(0 0 0 / 0.05), 0 8px 20px rgb(0 0 0 / 0.08);
}

/* ダーク: 無彩色の暗いグレーを土台に、赤とネイビーを明るくして読みやすくする / Dark: neutral charcoal base, red and navy lifted */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #161616;
  --bg-alt: #1e1e1e;
  --surface: #262626;
  --surface-2: #303030;
  --text: #f2f2f2;
  --muted: #b5b5b5;
  --line: #3a3a3a;

  --brand: #ff7b7b;
  --brand-ink: #2a0506;
  --accent: #8aa0ff;
  --focus: #9cc2ff;

  --header-bg: #7d000c;
  --header-fg: #ffffff;
  --header-muted: #ffffff;
  --header-hover: #9e0010;
  --header-line: #5e0009;

  --hero-bg: #a3000e;
  --hero-fg: #ffffff;
  --hero-muted: #ffffff;
  --hero-chip-bg: #ffffff;
  --hero-chip-fg: #a3000e;
  --hero-chip-line: #ffffff;

  --marker: transparent;         /* ダークでは蛍光ペンを使わない(濁って見えるため) / no highlighter in dark (looks muddy) */
  --card-accent: #8aa0ff;
  --footer-bg: #0d0d0d;
  --footer-fg: #b5b5b5;

  --idle-bg: #0d2f4d;   --idle-fg: #8fd0ff;   --idle-line: #1f5f96;   --idle-pill-bg: #5bbcf5;  --idle-pill-fg: #06192b;
  --run-bg: #45151a;    --run-fg: #ffb0b6;    --run-line: #7d2c34;
  --err-bg: #2a2a2a;    --err-fg: #fff834;    --err-line: #b5aa1a;    --err-pill-bg: #fff834;   --err-pill-fg: #2b2b2b;
  --off-bg: #2a2a2a;    --off-fg: #b5b5b5;    --off-line: #3d3d3d;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 20px rgb(0 0 0 / 0.3);
}