/* ============================================================
   yo-dawg.css — theme tokens & yo-dawg-specific styles
   Shared structural styles live in ../tools-shared.css
   ============================================================ */

/* ---------- tokens: yellow/purple geocities light ---------- */
:root {
  --bg:           #fffde7;
  --bg-alt:       #fff9c4;
  --card:         #ffffff;
  --border:       #6a0dad;
  --heading:      #6a0dad;
  --accent:       #0000cc;
  --accent-bg:    #e8e8ff;
  --hot:          #cc0066;
  --text:         #111111;
  --muted:        #444444;
  --new-color:    #0055cc;
  --mod-color:    #cc5500;
  --link-color:   #0000ee;
  --link-visited: #551a8b;
  --btn-bg:       #c0c0c0;
  --progress-bg:  #c0c0c0;
  --progress-fill:#0000cc;
  --node-fill:    #ffffff;
  --node-stroke:  #000080;
  --edge-color:   #000080;
  --link-edge:    #880088;
  --svg-bg:       #e8e8ff;
  --shadow:       4px 4px 0 #6a0dad;
  --code-bg:      #000000;
  --code-text:    #00ff41;
  --error:        #cc0000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0a0a0a;
    --bg-alt:       #0f0f1a;
    --card:         #111122;
    --border:       #00ff41;
    --heading:      #ff00ff;
    --accent:       #00ffff;
    --accent-bg:    #001a00;
    --hot:          #ff0066;
    --text:         #e0e0e0;
    --muted:        #aaaaaa;
    --new-color:    #00ffff;
    --mod-color:    #ffaa00;
    --link-color:   #00ccff;
    --link-visited: #aa44ff;
    --btn-bg:       #224422;
    --progress-bg:  #002200;
    --progress-fill:#00ff41;
    --node-fill:    #001100;
    --node-stroke:  #00ff41;
    --edge-color:   #00ccff;
    --link-edge:    #ff00ff;
    --svg-bg:       #050510;
    --shadow:       3px 3px 0 #00ff41;
    --code-bg:      #000000;
    --code-text:    #00ff41;
    --error:        #ff4444;
  }
}

/* ---------- title spans ---------- */
.title-yo {
  font-size: clamp(2.8rem, 8vw, 5rem);
  color: #ffff00;
  text-shadow: 4px 4px 0 #000, -2px -2px 0 #ff00ff;
  font-weight: 900;
}
.title-dawg {
  font-size: clamp(2.8rem, 8vw, 5rem);
  color: #00ffff;
  text-shadow: 4px 4px 0 #000, -2px -2px 0 #ff6600;
  font-weight: 900;
}

/* ---------- buttons ---------- */
.btn-go {
  background: #ffff00;
  color: #000000;
  font-size: 1.1rem;
  border-color: #fff #888 #888 #fff;
}
.btn-highlight {
  background: #0000cc;
  color: #ffffff;
  border-color: #4444ff #000088 #000088 #4444ff;
}

/* ---------- yo-dawg-specific SVG ---------- */
.s-node.trav-cur circle {
  stroke: var(--hot);
  stroke-width: 4;
  fill: var(--accent-bg);
}
.s-slink line, .s-slink path {
  stroke: var(--link-edge);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  fill: none;
}
.s-slink.new line, .s-slink.new path { stroke: var(--new-color); }
.s-slink.mod line, .s-slink.mod path { stroke: var(--mod-color); }

/* ---------- word track colours ---------- */
.word-track span.wt-active {
  background: #ffff00;
  color: #000000;
  border-color: var(--hot);
}
.word-track span.wt-done {
  background: #ccffcc;
  color: #004400;
  border-color: #004400;
}

/* ---------- bottom image ---------- */
.bottom-figure {
  text-align: center;
  margin: 2rem auto;
}
.bottom-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.bottom-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted, #888);
  font-style: italic;
}

/* ---------- class-based theme overrides ---------- */
html.theme-light {
  --bg:           #fffde7;
  --bg-alt:       #fff9c4;
  --card:         #ffffff;
  --border:       #6a0dad;
  --heading:      #6a0dad;
  --accent:       #0000cc;
  --accent-bg:    #e8e8ff;
  --hot:          #cc0066;
  --text:         #111111;
  --muted:        #444444;
  --new-color:    #0055cc;
  --mod-color:    #cc5500;
  --link-color:   #0000ee;
  --link-visited: #551a8b;
  --btn-bg:       #c0c0c0;
  --progress-bg:  #c0c0c0;
  --progress-fill:#0000cc;
  --node-fill:    #ffffff;
  --node-stroke:  #000080;
  --edge-color:   #000080;
  --link-edge:    #880088;
  --svg-bg:       #e8e8ff;
  --shadow:       4px 4px 0 #6a0dad;
  --code-bg:      #000000;
  --code-text:    #00ff41;
  --error:        #cc0000;
  color-scheme: light;
}
html.theme-dark {
  --bg:           #0a0a0a;
  --bg-alt:       #0f0f1a;
  --card:         #111122;
  --border:       #00ff41;
  --heading:      #ff00ff;
  --accent:       #00ffff;
  --accent-bg:    #001a00;
  --hot:          #ff0066;
  --text:         #e0e0e0;
  --muted:        #aaaaaa;
  --new-color:    #00ffff;
  --mod-color:    #ffaa00;
  --link-color:   #00ccff;
  --link-visited: #aa44ff;
  --btn-bg:       #224422;
  --progress-bg:  #002200;
  --progress-fill:#00ff41;
  --node-fill:    #001100;
  --node-stroke:  #00ff41;
  --edge-color:   #00ccff;
  --link-edge:    #ff00ff;
  --svg-bg:       #050510;
  --shadow:       3px 3px 0 #00ff41;
  --code-bg:      #000000;
  --code-text:    #00ff41;
  --error:        #ff4444;
  color-scheme: dark;
}
html.theme-dark .btn-highlight {
  background: #004400;
  color: #00ff41;
  border-color: #00aa00 #001100 #001100 #00aa00;
}
html.theme-dark .word-track span.wt-done {
  background: #002200;
  color: #00ff41;
  border-color: #00ff41;
}
html.theme-dark .word-track span.wt-active {
  background: var(--hot);
  color: #000;
}