/* 作成日時: 2026-07-18 19:23 JST */
/* 更新日時: 2026-07-27 22:11 JST */

/* デザイントークン定義。詳細は docs/design/GUI_DESIGN_SYSTEM.md §2 を参照。
   既存テンプレートとの互換性のため、--night/--day/--ink/--frame/--accent は
   新トークンへのエイリアスとして残す。帳票は現在1種類のため
   data-form-theme 属性は省略し、:root の既定帳票テーマを使用する。 */
:root {
  /* カラー（UI クローム。ライト既定） */
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-ink: #1b1f24;
  --color-ink-muted: #5b6470;
  --color-border: #d8dce2;
  --color-accent: #2f6fa8;
  --color-accent-contrast: #ffffff;
  --color-danger: #b3261e;
  --color-danger-bg: #fdeceb;
  --color-success: #1e7d3c;
  --color-success-bg: #e9f6ec;
  --color-warning: #8a5a00;
  --color-warning-bg: #fff4e5;

  /* 公開ランディング（login.html）のやわらかい面。帳票の水色・黄色と同系の
     淡い色で、アクセント色や本文色は変えずに明るい印象だけを足す。 */
  --color-surface-soft: #eaf4fb;
  --color-surface-warm: #fdf4de;

  /* 帳票テーマ（現行フォーム mdiary_nnew 相当）。
     スキャン対象は紙帳票のため、ダークモードの影響を受けない固定値とする。 */
  --diary-night: #cfe6f5;
  --diary-day: #fce9b8;
  --diary-ink: #222;
  --diary-frame: #333;

  /* 互換用エイリアス（フェーズ2以降、各テンプレート側の参照を新トークン名へ
     移行するまで維持する） */
  --ink: var(--color-ink);
  --frame: var(--diary-frame);
  --accent: var(--color-accent);
  --night: var(--diary-night);
  --day: var(--diary-day);

  /* タイポグラフィ。
     Inter を先頭に置くことで英数字へ Inter を使い、日本語はグリフを持つ
     後続の和文フォントへ文字単位でフォールバックさせる。 */
  --font-body: "bdman Inter", "bdman BIZ UDPGothic", "Hiragino Sans",
    "Yu Gothic UI", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-heading: "bdman Inter", "bdman M PLUS Rounded 1c",
    "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
    "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono: "bdman JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
    Monaco, Consolas, "Liberation Mono", monospace;
  /* 既存の参照との互換用。新規スタイルでは用途別トークンを使う。 */
  --font-sans: var(--font-body);
  --font-weight-body: 400;
  --font-weight-heading: 500;
  --font-weight-bold: 700;
  --line-height-body: 1.6;
  --line-height-heading: 1.35;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;

  /* スペーシング（4px 基準） */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* 角丸・影・モーション */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 6px 24px rgba(47, 111, 168, 0.12);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14171c;
    --color-surface: #1e2229;
    --color-ink: #e6e8eb;
    --color-ink-muted: #9aa4b2;
    --color-border: #333a44;
    --color-accent: #5b9bd8;
    --color-accent-contrast: #0c1116;
    --color-danger: #ff6b60;
    --color-danger-bg: #3a1f1c;
    --color-success: #5fd685;
    --color-success-bg: #16311f;
    --color-warning: #e8b565;
    --color-warning-bg: #3a2d16;
    --color-surface-soft: #1b2733;
    --color-surface-warm: #2b2519;
    --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}