/* ═══════════════════════════════════════════════════
   WordMetrics — Theme System
   Default: light  |  Toggle via [data-theme="dark"]
   ═══════════════════════════════════════════════════ */

/* ── LIGHT (default) ── */
:root {
  --bg:       #f5f5f0;
  --bg2:      #ffffff;
  --surface:  #ffffff;
  --surface2: #f0eff5;
  --border:   #e2e1ea;
  --border2:  #cccad8;
  --text:     #1a1830;
  --text2:    #3d3a55;
  --muted:    #8884a0;
  --accent:   #5b4fcf;
  --accent-h: #4a3fb8;
  --accent2:  #e05c3a;
  --accent3:  #18a87a;
  --accent4:  #d4a017;
  --accent5:  #9b59b6;

  /* stat colors */
  --stat1: #5b4fcf;
  --stat2: #18a87a;
  --stat3: #e05c3a;
  --stat4: #d4a017;
  --stat5: #7c5cbf;
  --stat6: #1a9e6e;

  /* component tokens */
  --header-bg:    #ffffff;
  --header-shadow: 0 1px 0 #e2e1ea;
  --toolbar-bg:   #f8f7fc;
  --editor-bg:    #ffffff;
  --panel-bg:     #ffffff;
  --card-bg:      #f8f7fc;
  --input-bg:     #f0eff5;
  --progress-bg:  #e2e1ea;
  --toast-bg:     #1a1830;
  --toast-text:   #f5f5f0;
  --freq-bar:     #5b4fcf;
  --danger-hover-bg:   #fff0ee;
  --danger-hover-text: #e05c3a;
  --danger-hover-bdr:  #f5c4bb;
  --toggle-bg:    #e2e1ea;
  --badge-purple-bg:  #ede9ff;
  --badge-purple-txt: #5b4fcf;
  --badge-orange-bg:  #fff0ee;
  --badge-orange-txt: #e05c3a;
  --seo-bg:       #f0eff5;
  --footer-bg:    #ffffff;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.08);
}

/* ── DARK ── */
[data-theme="dark"] {
  --bg:       #0f0f12;
  --bg2:      #17171c;
  --surface:  #17171c;
  --surface2: #1e1e25;
  --border:   #2a2a35;
  --border2:  #38384a;
  --text:     #eeeef5;
  --text2:    #c8c8dc;
  --muted:    #7878a0;
  --accent:   #7c6af7;
  --accent-h: #6a5ae0;
  --accent2:  #e86c4f;
  --accent3:  #3ec9a7;
  --accent4:  #f4c842;
  --accent5:  #b78af7;

  --stat1: #7c6af7;
  --stat2: #3ec9a7;
  --stat3: #e86c4f;
  --stat4: #f4c842;
  --stat5: #a78bfa;
  --stat6: #34d399;

  --header-bg:    #0f0f12;
  --header-shadow: 0 1px 0 #2a2a35;
  --toolbar-bg:   #17171c;
  --editor-bg:    #0f0f12;
  --panel-bg:     #17171c;
  --card-bg:      #1e1e25;
  --input-bg:     #1e1e25;
  --progress-bg:  #2a2a35;
  --toast-bg:     #1e1e25;
  --toast-text:   #eeeef5;
  --freq-bar:     #7c6af7;
  --danger-hover-bg:   #2a1515;
  --danger-hover-text: #e86c4f;
  --danger-hover-bdr:  #4a2020;
  --toggle-bg:    #2a2a35;
  --badge-purple-bg:  #1a1530;
  --badge-purple-txt: #7c6af7;
  --badge-orange-bg:  #2a1510;
  --badge-orange-txt: #e86c4f;
  --seo-bg:       #17171c;
  --footer-bg:    #17171c;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,.3);
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(20deg);
}
.theme-toggle svg { pointer-events: none; }
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ── SMOOTH TRANSITIONS ── */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .2s;
  transition-timing-function: ease;
}
/* Exceptions — don't transition things that should be instant */
textarea, input, button, a, .stat-value, .progress-bar, .freq-bar, .logo-dot {
  transition: all .2s ease;
}