/* =========================================================
   Color Theme Tokens  (光の裏側 / Amber × Ink)
   1色差し替えは --accent, --accent-600 を変えるだけでOK
   ========================================================= */

:root {
  /* Core palette (light) */
  --accent: #eab308; /* 主アクセント：黄金色 */
  --accent-600: #ca8a04; /* hover/active 濃色 */
  --ink-900: #0f172a; /* 見出しなどの強い文字色 */
  --ink-800: #111827; /* 本文の標準文字色 */
  --ink-500: #6b7280; /* 補足・ミュート */
  --line-200: #e5e7eb; /* 罫線・枠 */
  --surface: #ffffff; /* カード/パネル面 */
  --canvas: #fafafa; /* ページ背景 */

  /* Semantic tokens（既存CSSからは基本こちらを参照） */
  --color-text-strong: var(--ink-900);
  --color-text: var(--ink-800);
  --color-muted: var(--ink-500);
  --color-border: var(--line-200);
  --color-bg: var(--canvas);
  --color-surface: var(--surface);
  --color-accent: var(--accent);
  --color-accent-600: var(--accent-600);

  /* フォーカスリング（A11y） */
  --focus-ring: rgba(234, 179, 8, 0.45);

  /* “光の裏側”のブランドグラデ（必要な所で background に） */
  --brand-gradient: linear-gradient(90deg, #ffe98a 0%, #eab308 40%, #111 100%);
}

/* ---- Dark mode（自動） ---------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink-900: #f3f4f6;
    --ink-800: #e5e7eb;
    --ink-500: #9ca3af;
    --line-200: #2a2f3a;
    --surface: #121418;
    --canvas: #0b0d11;

    /* アクセントはそのままでもOK。少しだけ締めるなら以下に差し替え */
    /* --accent:     #F0B90A;
       --accent-600:#C89206; */
  }
}

/* =========================================================
   Mappings（既存コンポーネントへの最低限の色当て）
   既存の style.css は “色名”ではなく semantic token を参照
   ========================================================= */

body {
  background: var(--color-bg);
  color: var(--color-text);
}
.block-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.section-title {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-strong);
}
.muted,
.mini {
  color: var(--color-muted);
}

a {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}
a:hover {
  color: var(--color-accent-600);
}

.btn {
  background: var(--color-accent);
  color: #111; /* 黄×黒はコントラスト良好 */
  border: 1px solid transparent;
}
.btn:hover {
  background: var(--color-accent-600);
}
.btn--ghost {
  background: #fff0;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.badge {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.rule,
hr {
  border-color: var(--color-border);
}

/* フォーカスリング統一 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 小さなアクセント下線（見出しの下など任意） */
.section-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 8px;
  background: var(--color-accent);
  border-radius: 999px;
}

/* カードの強調帯などで使うと雰囲気が出る */
.bg-brand-gradient {
  background: var(--brand-gradient);
  color: #fff;
}
.text-accent {
  color: var(--color-accent) !important;
}
.border-accent {
  border-color: var(--color-accent) !important;
}