/* ═══════════════════════════════════════════════════════════════
   Emmerican Adventure — Light / Dark Mode
   This file defines ALL CSS variables for both modes
   ═══════════════════════════════════════════════════════════════ */

/* ── Font definitions (always needed) ─────────────────────── */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Noto Serif JP', 'Times New Roman', serif;
  --font-mono:    'Space Mono', monospace;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Light Mode ────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --ink:        #1a1714;
  --ink-light:  #3d3830;
  --ink-faint:  #6b6258;
  --paper:      #f5f0e8;
  --paper-warm: #ede7d9;
  --paper-dark: #ddd5c4;
  --red:        #c0392b;
  --red-muted:  #8b2020;
  --gold:       #b8922a;
  --white:      #fdfaf5;
}

/* ── Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:        #f0ebe3;
  --ink-light:  #d4cbbc;
  --ink-faint:  #9a8f82;
  --paper:      #1a1714;
  --paper-warm: #211e1a;
  --paper-dark: #2d2924;
  --red:        #e05444;
  --red-muted:  #c0392b;
  --gold:       #d4a93a;
  --white:      #f5f0e8;
}

/* ── Smooth transitions ────────────────────────────────────── */
*, *::before, *::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ── Toggle Button ─────────────────────────────────────────── */
.theme-toggle {
  background: var(--paper-dark);
  border: 1px solid var(--paper-dark);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

.theme-toggle:hover {
  border-color: var(--red);
}

/* ── Dark mode card/surface overrides ──────────────────────── */
[data-theme="dark"] .featured-card,
[data-theme="dark"] .post-card {
  background: var(--paper-warm);
  border-color: var(--paper-dark);
  box-shadow: 4px 4px 0 var(--paper-dark);
}

[data-theme="dark"] .featured-card:hover,
[data-theme="dark"] .post-card:hover {
  box-shadow: 8px 8px 0 var(--paper-dark);
}

[data-theme="dark"] .photos-hint {
  background: var(--paper-warm);
  border-left-color: var(--gold);
}

[data-theme="dark"] .newsletter-section {
  background: #0e0c0a;
}

[data-theme="dark"] .post-grid-empty {
  border-color: var(--paper-dark);
  color: var(--ink-faint);
}

[data-theme="dark"] .img-placeholder {
  background: var(--paper-dark);
}

[data-theme="dark"] .post-card-img {
  background: var(--paper-dark);
}