/* Official Carozel.id assets; branding only. No application palette changes. */
:root {
  --carozel-navy:#0f172a;
  --carozel-blue:#064cff;
  --carozel-purple:#6837f5;
  --carozel-pink:#e83ac6;
  --carozel-orange:#ff8a24;
  --carozel-logo-header-width:190px;
  --carozel-logo-header-width-mobile:156px;
}
.carozel-brand-link { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.carozel-brand-link > .carozel-brand-logo {
  display:block; width:min(var(--carozel-logo-header-width),42vw); height:auto;
  max-width:100%; aspect-ratio:1955 / 490; flex:0 0 auto;
}
.carozel-brand-logo > img { display:block; width:100%; height:auto; aspect-ratio:1955 / 490; }
.carozel-brand-link > .carozel-brand-logo--dark { display:none; }
.carozel-brand-link > .carozel-brand-icon { display:block; width:44px; height:44px; flex:0 0 auto; }
.site-footer .carozel-brand-link { --carozel-logo-header-width:160px; }
.editor-header .carozel-brand-link,
.dashboard-header .carozel-brand-link { --carozel-logo-header-width:176px; }
/* Automatic mode only when the host has not declared a light surface. */
@media (prefers-color-scheme:dark) {
  html:not(.light):not(.dark):not([data-theme]):not([data-carozel-surface="light"]) .carozel-brand-logo--light { display:none; }
  html:not(.light):not(.dark):not([data-theme]):not([data-carozel-surface="light"]) .carozel-brand-logo--dark { display:block; }
}
/* Explicit host theme always takes priority over the operating system. */
html.dark:not([data-theme="light"]) .carozel-brand-logo--light,
html[data-theme="dark"] .carozel-brand-logo--light { display:none; }
html.dark:not([data-theme="light"]) .carozel-brand-logo--dark,
html[data-theme="dark"] .carozel-brand-logo--dark { display:block; }
html.light:not([data-theme="dark"]) .carozel-brand-logo--light,
html[data-theme="light"] .carozel-brand-logo--light { display:block; }
html.light:not([data-theme="dark"]) .carozel-brand-logo--dark,
html[data-theme="light"] .carozel-brand-logo--dark { display:none; }
@media (max-width:640px) {
  .carozel-brand-link > .carozel-brand-logo { width:min(var(--carozel-logo-header-width-mobile),48vw); }
  .carozel-brand-link > .carozel-brand-icon { width:40px; height:40px; }
}