/* One website identity, including independently deployed legacy pages.
   No scripts, account state, page content, or agent artwork are changed here. */
@layer app-design, app-design-compatibility;

:root {
  --hybrix-brand-height: 22.4px;
  --primary: #000000 !important;
  --primary-foreground: #ffffff !important;
  --ring: #000000 !important;
  --sidebar-primary: #000000 !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-ring: #000000 !important;
  --accent: #f5f5f5 !important;
  --accent-foreground: #000000 !important;
}
html.dark:not([data-hybrix-site="app"]) {
  --primary: #ffffff !important;
  --primary-foreground: #000000 !important;
  --ring: #ffffff !important;
  --sidebar-primary: #ffffff !important;
  --sidebar-primary-foreground: #000000 !important;
}
.hybrix-brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--hybrix-brand-height) * .35);
  line-height: 1;
  flex-shrink: 0;
}
.hybrix-brand-large { --hybrix-brand-height: 33.6px; }
.hybrix-brand-mark {
  display: inline-flex;
  width: var(--hybrix-brand-height);
  height: var(--hybrix-brand-height);
  flex-shrink: 0;
}
.hybrix-wordmark {
  display: inline-block;
  width: calc(var(--hybrix-brand-height) * 4.711);
  height: var(--hybrix-brand-height);
  flex-shrink: 0;
  line-height: 1;
}
.hybrix-brand-mark img, .hybrix-wordmark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html.dark:not([data-hybrix-site="app"]) :is(.hybrix-brand-mark, .hybrix-wordmark) { filter: invert(1); }

/* Existing application releases keep their own JS. These selectors migrate
   only their old logo/wordmark, including embedded marketplace documents. */
@layer app-design {
  html:root .font-brand[class],
  html:root img[src="/hybrix-logo.png"] + span.font-pixel {
    position: relative;
    display: inline-block !important;
    width: calc(var(--hybrix-brand-height) * 4.711);
    height: var(--hybrix-brand-height);
    min-width: calc(var(--hybrix-brand-height) * 4.711);
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    vertical-align: middle;
  }
  html:root .font-brand[class] > * { visibility: hidden !important; }
  html .font-brand::after,
  html img[src="/hybrix-logo.png"] + span.font-pixel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/brand/hybrix-wordmark.svg") center / contain no-repeat;
  }
  html img[src="/hybrix-logo.png"] {
    content: url("/hardware/hybrix-mark.png");
    object-fit: contain;
  }
  html nav img[src="/hybrix-logo.png"],
  html:root .app-brand-icon[class] img {
    width: var(--hybrix-brand-height) !important;
    height: var(--hybrix-brand-height) !important;
  }
  html:root .app-brand-icon[class] {
    width: var(--hybrix-brand-height) !important;
    height: var(--hybrix-brand-height) !important;
  }
  html[data-hybrix-site="app"] { --hybrix-brand-height: 14px; }
  html[data-hybrix-site="app"] .hybrix-wordmark {
    width: calc(var(--hybrix-brand-height) * 4.711);
    height: var(--hybrix-brand-height);
  }
}
html.dark:not([data-hybrix-site="app"]) .font-brand::after,
html.dark:not([data-hybrix-site="app"]) img[src="/hybrix-logo.png"] { filter: invert(1); }

/* Brand accents only. Semantic warnings, portrait/category colors, pixel
   palettes, provider logos and product colorways deliberately stay colorful. */
.hero-action-word { color: #000000 !important; }
.hero-create-link::before, .hero-create-link::after { background: #000000 !important; }
.hero-create-link:focus-visible { outline-color: #000000 !important; }

[class~="text-[#ef6b32]"] { color: var(--primary) !important; }
[class~="bg-[#ef6b32]"] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; box-shadow: none !important; }
[class~="border-[#ef6b32]"] { border-color: var(--primary) !important; }
[class~="accent-[#ef6b32]"] { accent-color: var(--primary) !important; }
[class~="hover:text-[#ef6b32]"]:hover { color: var(--primary) !important; }
[class~="hover:border-[#ef6b32]/55"]:hover { border-color: var(--primary) !important; }
[class~="focus-visible:outline-[#ef6b32]"]:focus-visible { outline-color: var(--primary) !important; }
[style*="background-color: #ef6b32" i], [style*="background-color:#ef6b32" i] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }

[class~="text-[#e6672e]"] { color: var(--primary) !important; }
[class~="bg-[#e6672e]"] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; box-shadow: none !important; }
[class~="border-[#e6672e]"] { border-color: var(--primary) !important; }
[class~="accent-[#e6672e]"] { accent-color: var(--primary) !important; }
[class~="hover:text-[#e6672e]"]:hover { color: var(--primary) !important; }
[class~="hover:border-[#e6672e]/55"]:hover { border-color: var(--primary) !important; }
[class~="focus-visible:outline-[#e6672e]"]:focus-visible { outline-color: var(--primary) !important; }
[style*="background-color: #e6672e" i], [style*="background-color:#e6672e" i] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }

[class~="text-[#d75d22]"] { color: var(--primary) !important; }
[class~="bg-[#d75d22]"] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; box-shadow: none !important; }
[class~="border-[#d75d22]"] { border-color: var(--primary) !important; }
[class~="accent-[#d75d22]"] { accent-color: var(--primary) !important; }
[class~="hover:text-[#d75d22]"]:hover { color: var(--primary) !important; }
[class~="hover:border-[#d75d22]/55"]:hover { border-color: var(--primary) !important; }
[class~="focus-visible:outline-[#d75d22]"]:focus-visible { outline-color: var(--primary) !important; }
[style*="background-color: #d75d22" i], [style*="background-color:#d75d22" i] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }

[class~="text-[#de642c]"] { color: var(--primary) !important; }
[class~="bg-[#de642c]"] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; box-shadow: none !important; }
[class~="border-[#de642c]"] { border-color: var(--primary) !important; }
[class~="accent-[#de642c]"] { accent-color: var(--primary) !important; }
[class~="hover:text-[#de642c]"]:hover { color: var(--primary) !important; }
[class~="hover:border-[#de642c]/55"]:hover { border-color: var(--primary) !important; }
[class~="focus-visible:outline-[#de642c]"]:focus-visible { outline-color: var(--primary) !important; }
[style*="background-color: #de642c" i], [style*="background-color:#de642c" i] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }

[class~="text-[#df5c28]"] { color: var(--primary) !important; }
[class~="bg-[#df5c28]"] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; box-shadow: none !important; }
[class~="border-[#df5c28]"] { border-color: var(--primary) !important; }
[class~="accent-[#df5c28]"] { accent-color: var(--primary) !important; }
[class~="hover:text-[#df5c28]"]:hover { color: var(--primary) !important; }
[class~="hover:border-[#df5c28]/55"]:hover { border-color: var(--primary) !important; }
[class~="focus-visible:outline-[#df5c28]"]:focus-visible { outline-color: var(--primary) !important; }
[style*="background-color: #df5c28" i], [style*="background-color:#df5c28" i] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }

[style*="background-color: rgb(239, 107, 50)"],
[style*="background-color: rgb(230, 103, 46)"] { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }
#ecosystem-content [class~="bg-[#fff1e8]"],
#ecosystem-content [class~="bg-[#fff3eb]"] { background-color: #f5f5f5 !important; }
#ecosystem-content [class~="border-[#efc4ad]"] { border-color: #e5e5e5 !important; }
@media (max-width: 640px) {
  :root { --hybrix-brand-height: 19.2px; }
}