/* ワッチモ — design tokens (generated from design-tokens/tokens.json v3)
   名前は DS と共通。画面側で色を直書きせず、必ずこの変数で指定する。 */
:root {
  /* color — 昼間 Day */
  --harbor: #0e3b43;
  --on-harbor: #ffffff;
  --harbor-soft: #e3efed;
  --seaglass: #8fd5c4;
  --ink: #0f1e22;
  --ink-2: #3a4a4e;
  --ink-3: #5b6d71;
  --surface: #ffffff;
  --surface-soft: #f2f5f5;
  --page: #eef2f2;
  --line: #d9e2e2;
  --line-strong: #7a8c8f;
  --teal: #1e7f73;
  --teal-ink: #145c53;
  --teal-soft: #e1f2ef;
  --on-teal: #ffffff;
  --amber: #e8a317;
  --amber-ink: #7a5200;
  --amber-soft: #fcf1d8;
  --on-amber: #0f1e22;
  --red: #b3301f;
  --red-soft: #fae5e1;
  --on-red: #ffffff;
  --focus: var(--harbor);

  /* type */
  --font-sans: Lexend, "BIZ UDPGothic", "Hiragino Sans", system-ui, sans-serif;
  --font-jp: "BIZ UDPGothic", "Hiragino Sans", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, Menlo, monospace;

  /* spacing (4px step) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px;

  /* radius / border / shadow */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --bw-1: 1px; --bw-2: 2px; --bw-icon: 1.75px;
  --sh-1: 0 1px 3px rgba(15,30,34,0.08);
  --sh-2: 0 6px 20px rgba(15,30,34,0.10);
  --sh-3: 0 18px 48px rgba(15,30,34,0.16);

  /* breakpoints (参照用。メディアクエリには数値を直接書く) */
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1280px; --bp-xl: 1920px;
}

/* 夜間 Night bridge — LP では船橋表示部の再現（.wm-night の内側）だけに使う */
.wm-night {
  --harbor: #dbeeea;
  --on-harbor: #0e3b43;
  --harbor-soft: #16343a;
  --ink: #e6eeee;
  --ink-2: #b8c6c7;
  --ink-3: #8a9c9e;
  --surface: #0a171b;
  --surface-soft: #102328;
  --page: #071114;
  --line: #22383d;
  --line-strong: #62797e;
  --teal: #4fc2b1;
  --teal-ink: #8fdccf;
  --teal-soft: #12302c;
  --on-teal: #0a171b;
  --amber: #f0b83e;
  --amber-ink: #f5cd72;
  --amber-soft: #33280c;
  --on-amber: #0f1e22;
  --red: #f06a55;
  --red-soft: #3b1914;
  --on-red: #0a171b;
  --focus: var(--seaglass);
}