/* =========================================================
   Theme — Midnight (default dark) / Felt (light)
   ========================================================= */

/* デフォルト = Midnight */
:root {
  --bg:           #1C1F26;
  --bg-elev:      #232730;
  --surface:      #2D323D;
  --surface-2:    #363B47;
  --line:         rgba(255,255,255,.10);
  --line-2:       rgba(255,255,255,.22);
  --text:         #F1F1F1;
  --text-soft:    #CACDD3;
  --text-mute:    #9398A0;
  --accent:       #5DA9F4;
  --accent-hover: #80BCF7;
  --accent-ink:   #0E1A2E;
  --warn:         #FFB347;
  --brass:        #C9A961;
  --c-open:       #34D399;
  --c-late:       #A78BFA;
  --c-event:      #FB923C;
  --c-pro:        #FBBF24;
  --c-brunswick:  #22D3EE;
  --scheme:       dark;
}

/* ユーザ未選択かつ OS が light → Felt */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:           #EEF1ED;
    --bg-elev:      #F8FAF7;
    --surface:      #FFFFFF;
    --surface-2:    #E4EAE2;
    --line:         rgba(20,39,28,.10);
    --line-2:       rgba(20,39,28,.22);
    --text:         #14271C;
    --text-soft:    #3F5C49;
    --text-mute:    #7A9181;
    --accent:       #15803D;
    --accent-hover: #166534;
    --accent-ink:   #F0FDF4;
    --brass:        #B45309;
    --c-open:       #15803D;
    --c-late:       #6D28D9;
    --c-event:      #C2410C;
    --c-pro:        #B45309;
    --c-brunswick:  #0E7490;
    --scheme:       light;
  }
}

/* 明示選択: dark = Midnight */
[data-theme="dark"] {
  --bg:           #1C1F26;
  --bg-elev:      #232730;
  --surface:      #2D323D;
  --surface-2:    #363B47;
  --line:         rgba(255,255,255,.10);
  --line-2:       rgba(255,255,255,.22);
  --text:         #F1F1F1;
  --text-soft:    #CACDD3;
  --text-mute:    #9398A0;
  --accent:       #5DA9F4;
  --accent-hover: #80BCF7;
  --accent-ink:   #0E1A2E;
  --brass:        #C9A961;
  --c-open:       #34D399;
  --c-late:       #A78BFA;
  --c-event:      #FB923C;
  --c-pro:        #FBBF24;
  --c-brunswick:  #22D3EE;
  --scheme:       dark;
}

/* 明示選択: light = Felt */
[data-theme="light"] {
  --bg:           #EEF1ED;
  --bg-elev:      #F8FAF7;
  --surface:      #FFFFFF;
  --surface-2:    #E4EAE2;
  --line:         rgba(20,39,28,.10);
  --line-2:       rgba(20,39,28,.22);
  --text:         #14271C;
  --text-soft:    #3F5C49;
  --text-mute:    #7A9181;
  --accent:       #15803D;
  --accent-hover: #166534;
  --accent-ink:   #F0FDF4;
  --brass:        #B45309;
  --c-open:       #15803D;
  --c-late:       #6D28D9;
  --c-event:      #C2410C;
  --c-pro:        #B45309;
  --c-brunswick:  #0E7490;
  --scheme:       light;
}

/* =========================================================
   Theme Toggle Button (sun ↔ moon)
   ========================================================= */
.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 70;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  cursor: pointer;
  color: var(--text);
  transition: transform .2s, background .2s;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* light モード時は太陽アイコン */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

@media (min-width: 768px) {
  .theme-toggle { bottom: 16px; }
}