/*
 * ARUTANA インサイト 回答者ページのテーマ CSS
 *
 * このファイル 1 つでアンケート画面 (survey-dev.arutana.jp / survey.arutana.jp) の
 * 見た目を変更できます。 各 Vue コンポーネントの scoped style は CSS 変数を
 * 参照する形に段階的に書き換えていく想定です。
 *
 * 編集方法:
 *   - GitHub 上でこのファイル (ConfigMap YAML) を直接編集して commit してください
 *   - 変更対象は `data.theme.css: |` 以下の行のみ
 *   - 行頭の 4 空白インデントは必ず保つこと (崩すと YAML パースエラー)
 *
 * 反映方法:
 *   - commit 後、 別途 Deployment の restarted-at annotation を bump して Pod を
 *     再起動する必要があります (単に ConfigMap を更新しただけでは Pod に反映されません)
 */

:root {
  /* ブランドカラー */
  --brand-primary: #2b6cb0;
  --brand-primary-hover: #2c5282;
  --brand-secondary: #4a5568;
  --brand-accent: #ed8936;

  /* 背景・テキスト */
  --bg-page: #ffffff;
  --bg-card: #f7fafc;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #a0aec0;

  /* 状態色 */
  --color-error: #e53e3e;
  --color-warning: #dd6b20;
  --color-success: #38a169;
  --color-info: #3182ce;

  /* border / shadow */
  --border-color: #e2e8f0;
  --border-radius: 6px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* タイポグラフィ */
  --font-body: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif;
  --font-heading: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --line-height-base: 1.6;

  /* spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* container */
  --container-max-width: 720px;
}

/*
 * ここから下は 「テーマ変数の実適用」 セクション。
 * 各 Vue コンポーネントの scoped style を CSS 変数化するまでの
 * つなぎとして、 body / main / heading 等の基本要素にテーマを効かせる。
 */

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
}

a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-primary-hover);
}