/* 共通デザイントークン — トップページ & ブログで共有 */
:root {
  /* Colors */
  --color-bg: #000000;
  --color-bg-alt: #0A0A0A;
  --color-card: #111111;
  --color-elevated: #1A1A1A;
  --color-text: #EDEDED;
  --color-text-sub: #A1A1A1;
  --color-border: rgba(255, 255, 255, 0.15);
  --color-text-muted: #666666;
  --color-accent: #4285F4;
  --color-accent-hover: #5A9BFF;
  --color-border: #333333;
  --color-border-light: #222222;

  /* Typography (Aman style) */
  --font-serif: 'Cormorant', 'Noto Serif JP', serif;
  --font-sans: 'Inter', 'Noto Sans JP', sans-serif;
  --font-sans-jp: 'Noto Sans JP', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;

  /* Spacing (aman style) */
  --space-section: 128px;
  --container-max: 1024px;
  --container-padding: 40px;
}

:root[data-theme="light"] {
  --color-bg: #F8F8F8;
  --color-bg-alt: #F0F0F0;
  --color-card: #FFFFFF;
  --color-elevated: #FFFFFF;
  --color-text: #111111;
  --color-text-sub: #555555;
  --color-text-muted: #999999;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-accent: #2B6BD6;
  --color-accent-hover: #1A5AC0;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
  cursor: pointer;
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
  vertical-align: middle;
  padding: 0;
}
.theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text-sub);
}