/* Brand hues use readable shades in each theme. Labels retain the site text color. */
[data-hud-tool="html"], [data-hud-icon="html"] { --tool-color: #c7441c; }
:root[data-theme="dark"] [data-hud-tool="html"], :root[data-theme="dark"] [data-hud-icon="html"] { --tool-color: #ff895d; }
[data-hud-tool="css"], [data-hud-icon="css"] { --tool-color: #663399; }
:root[data-theme="dark"] [data-hud-tool="css"], :root[data-theme="dark"] [data-hud-icon="css"] { --tool-color: #b89be4; }
[data-hud-tool="javascript"], [data-hud-icon="javascript"] { --tool-color: #997000; }
:root[data-theme="dark"] [data-hud-tool="javascript"], :root[data-theme="dark"] [data-hud-icon="javascript"] { --tool-color: #f7df1e; }
[data-hud-tool="flutter"], [data-hud-icon="flutter"] { --tool-color: #0279ae; }
:root[data-theme="dark"] [data-hud-tool="flutter"], :root[data-theme="dark"] [data-hud-icon="flutter"] { --tool-color: #59c8f6; }
[data-hud-tool="react"], [data-hud-icon="react"] { --tool-color: #087e98; }
:root[data-theme="dark"] [data-hud-tool="react"], :root[data-theme="dark"] [data-hud-icon="react"] { --tool-color: #61dafb; }
[data-hud-tool="vue"], [data-hud-icon="vue"] { --tool-color: #23835c; }
:root[data-theme="dark"] [data-hud-tool="vue"], :root[data-theme="dark"] [data-hud-icon="vue"] { --tool-color: #4fc08d; }
[data-hud-tool="php"], [data-hud-icon="php"] { --tool-color: #666ba3; }
:root[data-theme="dark"] [data-hud-tool="php"], :root[data-theme="dark"] [data-hud-icon="php"] { --tool-color: #a5a9df; }
[data-hud-tool="dart"], [data-hud-icon="dart"] { --tool-color: #0175c2; }
:root[data-theme="dark"] [data-hud-tool="dart"], :root[data-theme="dark"] [data-hud-icon="dart"] { --tool-color: #59bdf4; }
[data-hud-tool="python"], [data-hud-icon="python"] { --tool-color: #3776ab; }
:root[data-theme="dark"] [data-hud-tool="python"], :root[data-theme="dark"] [data-hud-icon="python"] { --tool-color: #75b9ed; }
[data-hud-tool="nodejs"], [data-hud-icon="nodejs"] { --tool-color: #438632; }
:root[data-theme="dark"] [data-hud-tool="nodejs"], :root[data-theme="dark"] [data-hud-icon="nodejs"] { --tool-color: #87c86b; }
[data-hud-tool="expressjs"], [data-hud-icon="expressjs"] { --tool-color: #20242a; }
:root[data-theme="dark"] [data-hud-tool="expressjs"], :root[data-theme="dark"] [data-hud-icon="expressjs"] { --tool-color: #e5e8ee; }
[data-hud-tool="api"], [data-hud-icon="api"] { --tool-color: #7c3aed; }
:root[data-theme="dark"] [data-hud-tool="api"], :root[data-theme="dark"] [data-hud-icon="api"] { --tool-color: #c3a3ff; }
[data-hud-tool="mysql"], [data-hud-icon="mysql"] { --tool-color: #4479a1; }
:root[data-theme="dark"] [data-hud-tool="mysql"], :root[data-theme="dark"] [data-hud-icon="mysql"] { --tool-color: #83b9de; }
[data-hud-tool="sqlite"], [data-hud-icon="sqlite"] { --tool-color: #006594; }
:root[data-theme="dark"] [data-hud-tool="sqlite"], :root[data-theme="dark"] [data-hud-icon="sqlite"] { --tool-color: #75bce9; }
[data-hud-tool="turso"], [data-hud-icon="turso"] { --tool-color: #087a63; }
:root[data-theme="dark"] [data-hud-tool="turso"], :root[data-theme="dark"] [data-hud-icon="turso"] { --tool-color: #4ff8d2; }
[data-hud-tool="laragon"], [data-hud-icon="laragon"] { --tool-color: #0e83cd; }
:root[data-theme="dark"] [data-hud-tool="laragon"], :root[data-theme="dark"] [data-hud-icon="laragon"] { --tool-color: #5cc1fc; }
[data-hud-tool="xampp"], [data-hud-icon="xampp"] { --tool-color: #ba5417; }
:root[data-theme="dark"] [data-hud-tool="xampp"], :root[data-theme="dark"] [data-hud-icon="xampp"] { --tool-color: #fb9c4c; }
[data-hud-tool="codex"], [data-hud-icon="codex"] { --tool-color: #20242a; }
:root[data-theme="dark"] [data-hud-tool="codex"], :root[data-theme="dark"] [data-hud-icon="codex"] { --tool-color: #edeff2; }
[data-hud-tool="vercel"], [data-hud-icon="vercel"] { --tool-color: #171717; }
:root[data-theme="dark"] [data-hud-tool="vercel"], :root[data-theme="dark"] [data-hud-icon="vercel"] { --tool-color: #f5f5f5; }
[data-hud-tool="brevo"], [data-hud-icon="brevo"] { --tool-color: #087c58; }
:root[data-theme="dark"] [data-hud-tool="brevo"], :root[data-theme="dark"] [data-hud-icon="brevo"] { --tool-color: #51d7a5; }
[data-hud-tool="render"], [data-hud-icon="render"] { --tool-color: #20242a; }
:root[data-theme="dark"] [data-hud-tool="render"], :root[data-theme="dark"] [data-hud-icon="render"] { --tool-color: #edeff2; }
[data-social="github"] { --social-color: #24292f; }
:root[data-theme="dark"] [data-social="github"] { --social-color: #f0f3f6; }
[data-social="linkedin"] { --social-color: #0a66c2; }
:root[data-theme="dark"] [data-social="linkedin"] { --social-color: #69b6ff; }
[data-social="facebook"] { --social-color: #0866ff; }
:root[data-theme="dark"] [data-social="facebook"] { --social-color: #78b0ff; }
[data-social="instagram"] { --social-color: #c82772; }
:root[data-theme="dark"] [data-social="instagram"] { --social-color: #ff85ba; }
[data-social="email"] { --social-color: #c53628; }
:root[data-theme="dark"] [data-social="email"] { --social-color: #ff9389; }

.technology-hud .hud-tool {
  background: color-mix(in srgb, var(--tool-color) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--tool-color) 15%, var(--line));
  color: var(--text);
}
.technology-hud .hud-tool:hover,
.technology-hud .hud-tool:focus-visible,
.technology-hud .hud-tool.is-selected {
  border-color: var(--tool-color);
  background: color-mix(in srgb, var(--tool-color) 10%, var(--surface));
  color: var(--text);
}
.technology-hud .hud-tool-symbol {
  color: var(--tool-color);
  background: color-mix(in srgb, var(--tool-color) 10%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--tool-color) 14%, transparent);
  border-radius: 6px;
}
.technology-hud .hud-tool-symbol svg { width: 17px; height: 17px; }
.technology-hud [data-hud-icon="javascript"] { color: #f7df1e; background: #202637; }
.technology-hud .hud-detail-title-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 13px; }
.technology-hud .hud-detail-title-row h3 { margin: 0; }
.technology-hud .hud-detail-title-row .hud-tool-symbol { width: 38px; height: 38px; border-radius: 9px; }
.technology-hud .hud-detail-title-row .hud-tool-symbol svg { width: 24px; height: 24px; }
.site-footer .footer-social-link {
  color: var(--social-color);
  background: color-mix(in srgb, var(--social-color) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--social-color) 20%, var(--line));
}
.site-footer .footer-social-link:hover,
.site-footer .footer-social-link:focus-visible {
  color: var(--social-color);
  background: color-mix(in srgb, var(--social-color) 17%, var(--surface));
  border-color: var(--social-color);
}
.contact-socials .contact-social-brand { display: inline-grid; place-items: center; color: var(--social-color); vertical-align: middle; margin-right: 7px; }
.contact-social-brand svg { width: 16px; height: 16px; }