/*
 * Diaspora Flows — Theme System
 * dark is the default. light overrides via [data-theme="light"].
 * All components use var(--theme-*) aliases so theme-switching
 * requires zero component-level changes.
 */

/* ── Dark theme (default) ─────────────────────────────────── */
:root,
[data-theme="dark"] {
  --theme-bg:         var(--df-ink);
  --theme-bg-2:       var(--df-ink-2);
  --theme-bg-3:       var(--df-ink-3);
  --theme-text:       var(--df-cream);
  --theme-text-mid:   var(--df-warm-mid);
  --theme-text-low:   var(--df-warm-low);
  --theme-border:     var(--df-border);
  --theme-border-s:   var(--df-border-s);
  --theme-surface:    rgba(255,255,255,0.025);
  --theme-surface-2:  rgba(255,255,255,0.015);

  /* Nav */
  --theme-nav-bg:     rgba(8,7,10,0.92);
  --theme-nav-text:   var(--df-warm-mid);

  /* Logo */
  --theme-logo-stroke: #c9a84c;

  /* Inputs */
  --theme-input-bg:   var(--df-ink-2);
  --theme-input-text: var(--df-cream);
  --theme-input-border: var(--df-border);
}

/* ── Light theme ──────────────────────────────────────────── */
[data-theme="light"] {
  --theme-bg:         var(--df-warm-white);
  --theme-bg-2:       #f0ebe0;
  --theme-bg-3:       #e8e0d0;
  --theme-text:       var(--df-ink);
  --theme-text-mid:   #4a4030;
  --theme-text-low:   #7a7060;
  --theme-border:     rgba(8,7,10,0.12);
  --theme-border-s:   rgba(8,7,10,0.07);
  --theme-surface:    rgba(8,7,10,0.03);
  --theme-surface-2:  rgba(8,7,10,0.015);

  /* Nav */
  --theme-nav-bg:     rgba(250,248,243,0.95);
  --theme-nav-text:   #4a4030;

  /* Logo */
  --theme-logo-stroke: #8b6914;

  /* Inputs */
  --theme-input-bg:   #ffffff;
  --theme-input-text: var(--df-ink);
  --theme-input-border: rgba(8,7,10,0.15);
}

/* ── Base body override ───────────────────────────────────── */
body {
  background: var(--theme-bg);
  color:       var(--theme-text);
}

/* ── Transition (smooth switch, skip on page load) ─────────── */
.theme-ready * {
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease;
}

/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--theme-border);
  color: var(--theme-text-mid);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
}