:root {
  /* 白背景カード専用の文字色。カードの背景は常に白/クリームなので、
     ページ全体のテーマ(--color-text等)に関係なく常にこの濃い色で固定する。
     テーマ切り替えでカード内の文字が読めなくなる事故を防ぐため。 */
  --card-text:        #1c1510;
  --card-text-sub:    rgba(28,21,16,0.64);
  --card-text-muted:  rgba(28,21,16,0.46);
  --card-border:      rgba(60,50,35,0.12);
}

:root,
html[data-theme="ivory"] {
  --color-bg:          #fefdfc;
  --color-bg-alt:      #f7f5f2;
  --color-accent:      #2c2218;
  --color-accent-2:    #7a6a58;
  --color-text:        #1c1510;
  --color-text-sub:    rgba(28,21,16,0.64);
  --color-text-muted:  rgba(28,21,16,0.46);
  --color-border:      rgba(60,50,35,0.12);
  --color-border-soft: rgba(60,50,35,0.07);
  --color-surface:     rgba(60,50,35,0.04);
  --color-on-accent:   #f0eee9;
  --color-glass:        rgba(240,238,233,0.62);
  --color-glass-border: rgba(255,255,255,0.70);
}

html[data-theme="blue-grey"] {
  --color-bg:          #0e1e38;
  --color-bg-alt:      #142645;
  --color-accent:      #a0c0de;
  --color-accent-2:    #c2d8ee;
  --color-text:        #eef2f7;
  --color-text-sub:    rgba(238,242,247,0.62);
  --color-text-muted:  rgba(238,242,247,0.40);
  --color-border:      rgba(255,255,255,0.10);
  --color-border-soft: rgba(255,255,255,0.06);
  --color-surface:     rgba(255,255,255,0.06);
  --color-on-accent:   #0e1e38;
  --color-glass:        rgba(14,30,56,0.62);
  --color-glass-border: rgba(160,192,222,0.22);
}

html[data-theme="white"] {
  --color-bg:          #ffffff;
  --color-bg-alt:      #f2f2f2;
  --color-accent:      #111111;
  --color-accent-2:    #555555;
  --color-text:        #0d0d0d;
  --color-text-sub:    rgba(13,13,13,0.62);
  --color-text-muted:  rgba(13,13,13,0.44);
  --color-border:      rgba(0,0,0,0.10);
  --color-border-soft: rgba(0,0,0,0.06);
  --color-surface:     rgba(0,0,0,0.03);
  --color-on-accent:   #ffffff;
  --color-glass:        rgba(255,255,255,0.62);
  --color-glass-border: rgba(255,255,255,0.80);
}

html[data-theme="black"] {
  --color-bg:          #080808;
  --color-bg-alt:      #131313;
  --color-accent:      #c8b99a;
  --color-accent-2:    #e0d4be;
  --color-text:        #f0ece4;
  --color-text-sub:    rgba(240,236,228,0.58);
  --color-text-muted:  rgba(240,236,228,0.36);
  --color-border:      rgba(255,255,255,0.08);
  --color-border-soft: rgba(255,255,255,0.05);
  --color-surface:     rgba(255,255,255,0.04);
  --color-on-accent:   #080808;
  --color-glass:        rgba(8,8,8,0.62);
  --color-glass-border: rgba(200,185,154,0.20);
}

html[data-theme="blue-grey"] .biz-name,
html[data-theme="blue-grey"] .biz-catchphrase,
html[data-theme="black"]     .biz-name,
html[data-theme="black"]     .biz-catchphrase {
  color: var(--color-text);
}

html[data-theme="blue-grey"] .sns-btn,
html[data-theme="black"]     .sns-btn {
  color: rgba(255,255,255,0.90);
}

html[data-theme="blue-grey"] .sns-btn-icon,
html[data-theme="black"]     .sns-btn-icon {
  background: rgba(255,255,255,0.88);
  border-color: transparent;
}

html[data-theme="blue-grey"] .sns-btn-icon svg,
html[data-theme="black"]     .sns-btn-icon svg {
  filter: brightness(0);
}

html[data-theme="ivory"] .sns-btn,
html[data-theme="white"]  .sns-btn {
  color: rgba(240,238,233,0.65);
}

/* ナチュラルテーマは上部帯（.site-header）を本文と完全に同じ色にする */
html[data-theme="ivory"] .site-header {
  background: var(--color-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* blackテーマの上部帯は真っ黒ではなく、少しグレー寄りにする */
html[data-theme="black"] .site-header {
  background: #2b2b2b;
}

/* ダークテーマ(blue-grey/black)のフッター(充実版)はアクセントカラーに関わらず常に黒固定 */
html[data-theme="blue-grey"] .site-footer--full,
html[data-theme="black"]     .site-footer--full {
  background: #0a0a0a;
}