/* Overrides the panels' accent family for this brand (unlayered, so it wins over the panels' layered styles).
   Orange fills carry navy text, except the primary button of the light theme, which is the deeper orange with white text:
   white on #ea580c is 3.6:1, white on #c2410c is 5.2:1, navy on #ea580c is 5.7:1, navy on #f97316 is 7.2:1.
   The one pair that does not pass is navy on the light accent hover #c2410c (3.9:1). The panels never put the accent text on
   the hover colour (the hover of a button is --btn-primary-bg-hover, which passes), and a test pins that they do not use
   --hyperaven-accent-hover or --color-accent-hover at all. */
:root {
  --btn-primary-bg: #c2410c;
  --btn-primary-bg-hover: #9a3412;
  --btn-primary-text: #ffffff;
  --color-accent: #ea580c;
  --color-accent-hover: #c2410c;
  --color-accent-foreground: #020617;
  --brand-primary: var(--hyperaven-accent);
  --hyperaven-accent: #ea580c;
  --hyperaven-accent-hover: #c2410c;
  --hyperaven-accent-foreground: #020617;
  --hyperaven-accent-subtle: rgba(234, 88, 12, 0.08);
  --hyperaven-accent-border: rgba(234, 88, 12, 0.2);
  --brand-subtle-text: #9a3412; /* label on --hyperaven-accent-subtle */
  --entry-grid-color: rgba(234, 88, 12, 0.18);
  --entry-login-input-border: rgba(234, 88, 12, 0.3);
  --entry-login-input-autofill-shadow: rgba(234, 88, 12, 0.12);
  --entry-node-color: rgba(234, 88, 12, 0.35);
  --entry-glow: rgba(234, 88, 12, 0.12);
}

.dark {
  --btn-primary-bg: #f97316;
  --btn-primary-bg-hover: #fb923c;
  --btn-primary-text: #020617;
  --color-accent: #f97316;
  --color-accent-hover: #fb923c;
  --color-accent-foreground: #020617;
  --brand-primary: var(--hyperaven-accent);
  --hyperaven-accent: #f97316;
  --hyperaven-accent-hover: #fb923c;
  --hyperaven-accent-foreground: #020617;
  --hyperaven-accent-subtle: rgba(249, 115, 22, 0.12);
  --hyperaven-accent-border: rgba(249, 115, 22, 0.28);
  --brand-subtle-text: #fdba74; /* label on --hyperaven-accent-subtle */
  --entry-grid-color: rgba(249, 115, 22, 0.22);
  --entry-login-input-border: rgba(249, 115, 22, 0.34);
  --entry-login-input-autofill-shadow: rgba(249, 115, 22, 0.1);
  --entry-node-color: rgba(249, 115, 22, 0.5);
  --entry-glow: rgba(249, 115, 22, 0.15);
}

/* The panel logo, in colour and a third larger in the sidebar.
   The panels paint their logo in one colour: a CSS mask of /brand/mark.svg and /brand/logo-text.svg over currentColor, inside
   .ha-cloud-brand. These rules take the mask off and put the coloured files in its place (the mark has its gradient in
   mark.svg, the wordmark comes in a light and a dark form for the two themes), and scale the sidebar's mark and word by a
   third without changing their boxes, so the layout stays as the panels made it. The mark grows to the left of its box, the
   word to the right of its own, so that they do not meet; the collapsed sidebar's mark, alone, grows from its centre.
   They are scoped to .ha-cloud-brand: the same mask classes draw a faint watermark elsewhere (the 404 page, empty lists),
   and that stays as it is. They depend on the class names of the panels (.ha-sidebar, .ha-cloud-brand, .ha-brand-mark-mask,
   .ha-brand-wordmark-text): the image build reads this file and stops with "panel contract changed: selector .<class>"
   when one of them is gone from a panel's build. */
.ha-cloud-brand .ha-brand-mark-mask {
  -webkit-mask: none;
  mask: none;
  background: url("/brand/mark.svg") center / contain no-repeat;
}

.ha-cloud-brand .ha-brand-wordmark-text {
  -webkit-mask: none;
  mask: none;
  background: url("/brand/logo-text-light.svg") left center / contain no-repeat;
}

.dark .ha-cloud-brand .ha-brand-wordmark-text {
  background-image: url("/brand/logo-text-dark.svg");
}

.ha-sidebar .ha-cloud-brand .ha-brand-mark-mask {
  transform: scale(1.33);
  transform-origin: right center;
}

.ha-sidebar .ha-cloud-brand .ha-brand-mark-mask:only-child {
  transform-origin: center;
}

.ha-sidebar .ha-cloud-brand .ha-brand-wordmark-text {
  transform: scale(1.33);
  transform-origin: left center;
}