/* =============================================================
 * Design Tokens / デザイントークン
 * =============================================================
 * Figma のカラースタイル名と一致させること。
 * デザイナーが主に編集するファイル。
 * =============================================================
 *
 * テーマシステム:
 * - :root がデフォルト（朱テーマ）。印刷時（@media print）は常にこれが使われる。
 * - @media screen 内の html[data-theme="..."] で画面用テーマを上書きする。
 * - 画面限定なので print.css は一切影響を受けない。
 * ============================================================= */

:root {
  /* === カラー（朱テーマ / デフォルト） === */
  --color-primary: #A6140E;
  --color-primary-dark: #802017;
  --color-on-primary: #ffffff;
  --color-heading: #561912;
  --color-link: #A6140E;
  --color-bg-page: #FAF8F6;
  --color-bg-card: #ffffff;
  --color-bg-table-header: #FAF5F3;
  --color-bg-info: #F5EDEC;
  --color-border: #E5D5D0;
  --color-text: #333;
  --color-text-secondary: #666;
  --color-text-muted: #555;
  --color-danger: #c0392b;
  --color-success: #27ae60;
  --color-warning: #ff9800;
  --color-disabled: #C0B0B0;
  --color-accent-warm: #ffcccc;   /* 五行バランス「ベース」カードヘッダ */
  --color-accent-cool: #cce5ff;   /* 年運「流年」カードヘッダ */

  /* === 帳票 === */
  --print-border-color: #8B7355;
  --print-bg-header: #f5f0eb;

  /* === タイポグラフィ === */
  --font-family-screen: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                         "Hiragino Sans", Meiryo, sans-serif;
  --font-family-print: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

  /* === スペーシング・形状 === */
  --radius-card: 8px;
  --shadow-card: 0 2px 4px rgba(0,0,0,0.1);
}

/* =============================================================
 * テーマ上書き（画面限定）
 * ============================================================= */
@media screen {

  html[data-theme="wamodern"] {
    --color-primary: #1B3A5B;
    --color-primary-dark: #0F2540;
    --color-on-primary: #ffffff;
    --color-heading: #1B3A5B;
    --color-link: #1B3A5B;
    --color-bg-page: #F7F3EA;
    --color-bg-card: #FFFFFF;
    --color-bg-table-header: #F2EADB;
    --color-bg-info: #F9F1DF;
    --color-border: #D8C9A6;
    --color-text: #2b2b2b;
    --color-text-secondary: #5a5348;
    --color-text-muted: #6b6558;
    --color-danger: #9e2a2b;
    --color-success: #3d7a52;
    --color-warning: #b98a1f;
    --color-disabled: #B8AE96;
    --color-accent-warm: #F3E3B5;
    --color-accent-cool: #DCE8F0;
  }

  html[data-theme="mono"] {
    --color-primary: #333333;
    --color-primary-dark: #111111;
    --color-on-primary: #ffffff;
    --color-heading: #222222;
    --color-link: #333333;
    --color-bg-page: #FFFFFF;
    --color-bg-card: #FFFFFF;
    --color-bg-table-header: #F2F2F2;
    --color-bg-info: #F7F7F7;
    --color-border: #CCCCCC;
    --color-text: #222222;
    --color-text-secondary: #555555;
    --color-text-muted: #666666;
    --color-danger: #555555;
    --color-success: #444444;
    --color-warning: #777777;
    --color-disabled: #BBBBBB;
    --color-accent-warm: #EEEEEE;
    --color-accent-cool: #E0E0E0;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.08);
  }

} /* end @media screen */