/*
 * theme.css — クール系ライトテーマのカラーパレット定義と body ベーススタイル。
 *
 * 設計方針:
 * - WCAG AA 以上のコントラスト比を確保（テキストは AAA 相当）
 * - 色弱（赤緑色覚異常）対応のため、青を主軸にしたパレット
 * - 緑/赤は色だけに依存せず、絵文字や形状（✅ / —）と併用すること
 */

:root {
  /* 背景（クールな白） */
  --color-bg-base: #f8fafc;          /* slate-50 */
  --color-bg-secondary: #f1f5f9;      /* slate-100 */

  /* カード */
  --color-card: #ffffff;
  --color-card-hover: #f8fafc;

  /* アクセント（青系、色弱でも視認可能） */
  --color-accent: #0369a1;            /* sky-700, white 文字とのコントラスト 7.0:1 (AAA) */
  --color-accent-dark: #0c4a6e;       /* sky-900 */
  --color-accent-soft: #e0f2fe;       /* sky-100, 背景強調用 */
  --color-accent-glow: rgba(3, 105, 161, 0.18);

  /* テキスト（高コントラスト） */
  --color-text-primary: #0f172a;      /* slate-900, AAA 16:1+ */
  --color-text-muted: #475569;         /* slate-600, AA 7:1+ */
  --color-text-dim: #64748b;          /* slate-500, AA 4.6:1 */
  --color-text-on-accent: #ffffff;    /* アクセント背景上のテキスト */
  /* 無効状態のテキスト。**あえてコントラストを落とす**（操作できないことを示すため）。
     読ませる文字には使わない。 */
  --color-text-disabled: #a3aebe;     /* slate-400 相当 */

  /* ボーダー */
  --color-border: #e2e8f0;            /* slate-200 */
  --color-border-strong: #cbd5e1;     /* slate-300 */

  /* シャドウ（ライトテーマ用、薄い影） */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 10px 20px rgba(15, 23, 42, 0.10), 0 3px 6px rgba(15, 23, 42, 0.06);

  /* セマンティック色（色弱対応：絵文字・テキストと併用前提） */
  --color-success: #047857;           /* emerald-700, white 文字とのコントラスト 5.7:1 (AA) */
  --color-success-soft: #d1fae5;      /* emerald-100 */
  --color-warning: #b45309;           /* amber-700, white 文字とのコントラスト 5.0:1 (AA) */
  --color-warning-soft: #fef3c7;      /* amber-100 */
  --color-danger: #b91c1c;            /* red-700, white 文字とのコントラスト 6.4:1 (AA) */
  --color-danger-soft: #fee2e2;       /* red-100 */

  /* レイアウト */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition-fast: 0.18s ease;
  --transition-base: 0.25s ease;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

/* ホバー時はアンダースコアを維持し、色調の変化で状態を示す */
a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
}

p {
  color: var(--color-text-primary);
  margin: 0 0 0.8em;
}

code {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  color: var(--color-accent-dark);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 24px 0;
}

::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
}