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

/* ---------- tokens: green geocities light ---------- */
:root {
  --bg:           #f0fff0;
  --bg-alt:       #dcffdc;
  --card:         #ffffff;
  --border:       #1a6b1a;
  --heading:      #1a6b1a;
  --accent:       #0000cc;
  --accent-bg:    #e8ffe8;
  --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:#006400;
  --node-fill:    #ffffff;
  --node-stroke:  #1a6b1a;
  --edge-color:   #1a6b1a;
  --svg-bg:       #e8ffe8;
  --shadow:       4px 4px 0 #1a6b1a;
  --code-bg:      #000000;
  --code-text:    #00ff41;
  --error:        #cc0000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #030a03;
    --bg-alt:       #071007;
    --card:         #091209;
    --border:       #00ff41;
    --heading:      #00ff41;
    --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:       #0f2a0f;
    --progress-bg:  #002200;
    --progress-fill:#00ff41;
    --node-fill:    #001100;
    --node-stroke:  #00ff41;
    --edge-color:   #00cc66;
    --svg-bg:       #020802;
    --shadow:       3px 3px 0 #00ff41;
    --code-bg:      #000000;
    --code-text:    #00ff41;
    --error:        #ff4444;
  }
}

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

/* ---------- trie-specific: label width ---------- */
.form-row label { min-width: 180px; }

/* ---------- buttons ---------- */
.btn-go {
  background: #ccff66;
  color: #003300;
  font-size: 1.1rem;
  border-color: #fff #888 #888 #fff;
}
.btn-highlight {
  background: #006400;
  color: #ffffff;
  border-color: #00aa00 #002200 #002200 #00aa00;
}

/* ---------- trie-specific SVG ---------- */
.s-node .leaf-inner {
  fill: none;
  stroke: var(--node-stroke);
  stroke-width: 1.5;
}
.s-node.new .leaf-inner { stroke: var(--new-color); }
.s-node.mod .leaf-inner { stroke: var(--mod-color); }
.s-node.leaf circle     { stroke-width: 2.5; }

/* ---------- trie legend ---------- */
.trie-leaf-legend {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--node-stroke);
}

/* ---------- word track colours ---------- */
.word-track span.wt-active {
  background: #ccff66;
  color: #003300;
  border-color: var(--hot);
}
.word-track span.wt-done {
  background: #ccffcc;
  color: #003300;
  border-color: #003300;
}
.word-track span.wt-match {
  background: #cce8ff;
  color: #001a44;
  border-color: #0055cc;
}

/* ---------- class-based theme overrides ---------- */
html.theme-light {
  --bg:           #f0fff0;
  --bg-alt:       #dcffdc;
  --card:         #ffffff;
  --border:       #1a6b1a;
  --heading:      #1a6b1a;
  --accent:       #0000cc;
  --accent-bg:    #e8ffe8;
  --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:#006400;
  --node-fill:    #ffffff;
  --node-stroke:  #1a6b1a;
  --edge-color:   #1a6b1a;
  --svg-bg:       #e8ffe8;
  --shadow:       4px 4px 0 #1a6b1a;
  --code-bg:      #000000;
  --code-text:    #00ff41;
  --error:        #cc0000;
  color-scheme: light;
}
html.theme-dark {
  --bg:           #030a03;
  --bg-alt:       #071007;
  --card:         #091209;
  --border:       #00ff41;
  --heading:      #00ff41;
  --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:       #0f2a0f;
  --progress-bg:  #002200;
  --progress-fill:#00ff41;
  --node-fill:    #001100;
  --node-stroke:  #00ff41;
  --edge-color:   #00cc66;
  --svg-bg:       #020802;
  --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;
}
html.theme-dark .word-track span.wt-match {
  background: #001a44;
  color: #00ccff;
  border-color: #0055cc;
}