/* ── Toolhaus Theme System ─────────────────────────────────────────────────── */

/* Default = Midnight (applied to html so CSS vars are available before JS) */
html {
  --th-bg:           #0f172a;
  --th-bg-deep:      #020617;
  --th-surface:      #1e293b;
  --th-surface-mid:  #283548;
  --th-surface-lo:   #0f172a;
  --th-text:         #f1f5f9;
  --th-text-muted:   #94a3b8;
  --th-accent:       #a78bfa;
  --th-accent-bg:    #7c3aed;
  --th-accent-hover: #6d28d9;
  --th-accent-muted: rgba(139,92,246,.18);
  --th-border:       #334155;
  --th-shadow:       rgba(0,0,0,.4);
  --th-wordmark:     #F0F0F0;
  color-scheme: dark;
}

[data-theme="midnight"] {
  --th-bg:           #0f172a;
  --th-bg-deep:      #020617;
  --th-surface:      #1e293b;
  --th-surface-mid:  #283548;
  --th-surface-lo:   #0f172a;
  --th-text:         #f1f5f9;
  --th-text-muted:   #94a3b8;
  --th-accent:       #a78bfa;
  --th-accent-bg:    #7c3aed;
  --th-accent-hover: #6d28d9;
  --th-accent-muted: rgba(139,92,246,.18);
  --th-border:       #334155;
  --th-shadow:       rgba(0,0,0,.4);
  --th-wordmark:     #F0F0F0;
  color-scheme: dark;
}

[data-theme="silas"] {
  --th-bg:           #1c1917;
  --th-bg-deep:      #0c0a09;
  --th-surface:      #292524;
  --th-surface-mid:  #3c3835;
  --th-surface-lo:   #1c1917;
  --th-text:         #fffbeb;
  --th-text-muted:   #a8a29e;
  --th-accent:       #fbbf24;
  --th-accent-bg:    #d97706;
  --th-accent-hover: #b45309;
  --th-accent-muted: rgba(251,191,36,.18);
  --th-border:       #44403c;
  --th-shadow:       rgba(0,0,0,.5);
  --th-wordmark:     #F0EAFF;
  color-scheme: dark;
}

[data-theme="dawn"] {
  --th-bg:           #fffbeb;
  --th-bg-deep:      #fafaf9;
  --th-surface:      #ffffff;
  --th-surface-mid:  #f5f5f4;
  --th-surface-lo:   #fef9ee;
  --th-text:         #292524;
  --th-text-muted:   #78716c;
  --th-accent:       #0d9488;
  --th-accent-bg:    #0d9488;
  --th-accent-hover: #0f766e;
  --th-accent-muted: rgba(13,148,136,.13);
  --th-border:       #e7e5e4;
  --th-shadow:       rgba(0,0,0,.1);
  --th-wordmark:     #1A1A1A;
  color-scheme: light;
}

[data-theme="arctic"] {
  --th-bg:           #f8fafc;
  --th-bg-deep:      #f0f9ff;
  --th-surface:      #ffffff;
  --th-surface-mid:  #f1f5f9;
  --th-surface-lo:   #f0f9ff;
  --th-text:         #1e293b;
  --th-text-muted:   #64748b;
  --th-accent:       #0891b2;
  --th-accent-bg:    #0891b2;
  --th-accent-hover: #0e7490;
  --th-accent-muted: rgba(8,145,178,.13);
  --th-border:       #e2e8f0;
  --th-shadow:       rgba(0,0,0,.08);
  --th-wordmark:     #1E293B;
  color-scheme: light;
}

/* ── Smooth transitions (added after DOMContentLoaded to avoid load flash) ── */
html.th-ready * { transition: background-color .15s, border-color .15s, color .1s; }

/* ── Semantic utility classes ─────────────────────────────────────────────── */
.th-bg         { background-color: var(--th-bg);         color: var(--th-text); }
.th-bg-deep    { background-color: var(--th-bg-deep);    }
.th-surface    { background-color: var(--th-surface);    }
.th-surface-mid{ background-color: var(--th-surface-mid);}
.th-text       { color: var(--th-text); }
.th-text-muted { color: var(--th-text-muted); }
.th-accent     { color: var(--th-accent); }
.th-accent-bg  { background-color: var(--th-accent-bg); color: #fff; }
.th-border     { border-color: var(--th-border) !important; }
.th-input      { background-color: var(--th-surface); color: var(--th-text); border-color: var(--th-border); }
.th-input::placeholder { color: var(--th-text-muted); }
.th-btn        { background-color: var(--th-accent-bg); color: #fff; }
.th-btn:hover  { background-color: var(--th-accent-hover); }
/* Category badges — works on all 4 themes */
.th-badge {
  color: var(--th-accent);
  background-color: var(--th-accent-muted);
}
/* In-body links that follow theme accent */
.th-link { color: var(--th-accent); }
.th-link:hover { text-decoration: underline; }
/* Tool card title hover */
.th-card-hover:hover { color: var(--th-accent); }
/* Focus ring using theme accent */
.th-focus:focus { outline: 2px solid var(--th-accent); outline-offset: 1px; }

/* ── Theme picker dropdown ───────────────────────────────────────────────── */
#th-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background-color: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--th-shadow);
  padding: 4px;
  min-width: 155px;
  z-index: 200;
  display: none;
}
#th-picker-dropdown.open { display: block; }

.th-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--th-text-muted);
  text-align: left;
  white-space: nowrap;
}
.th-picker-opt:hover { background-color: var(--th-surface-mid); color: var(--th-text); }
.th-picker-opt.active { color: var(--th-accent); background-color: var(--th-surface-mid); }
.th-picker-opt .th-check { margin-left: auto; font-size: 10px; opacity: 0; }
.th-picker-opt.active .th-check { opacity: 1; }
.th-picker-icon { width: 15px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

/* ── Silas header gradient ──────────────────────────────────────────────── */
[data-theme="silas"] nav,
[data-theme="silas"] header.main-nav { background: linear-gradient(135deg, #1c1917 0%, #292524 100%); }

/* ── Wordmark ────────────────────────────────────────────────────────────── */
/* ── Wordmark base ───────────────────────────────────────────────────────── */
.wordmark {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--th-wordmark);
  line-height: 1;
  text-decoration: none;
}
.wordmark-dot { color: var(--th-accent); }

/* Nav size */
.wordmark-nav { font-size: 1.2rem; }
/* Hero size — responsive via clamp */
.wordmark-hero { font-size: clamp(2rem, 8vw, 3.5rem); display: block; }

@media (max-width: 480px) {
  .wordmark-nav  { font-size: 1.05rem; }
}
/* Regex subdomain size in header */
.wordmark-regex { font-size: 0.85rem; }
/* Subdomain prefix (regex.) at lighter weight */
.wordmark-sub { font-weight: 500; margin-right: 0.08em; }


/* Diamond prefix */
.wordmark-diamond {
  color: var(--th-accent);
  font-size: 1.2em;
  vertical-align: -0.05em;
  margin-right: 0.18em;
}

/* Gradient on tool */
.wordmark-gradient-part {
  background: linear-gradient(135deg, var(--th-accent) 0%, var(--th-wordmark) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}