/* The Sovereign Data brand on Zammad 7.2. The front (stack/front/zammad-front.conf) links this
   into the head of every page, after Zammad's own stylesheet.

   Zammad draws every color from custom properties on :root (its light theme) and on
   [data-theme="dark"] (its dark theme), so this sets those properties rather than restyling
   elements: the brand's dark palette for both themes, because the brand is built for dark
   screens. The selectors carry one more part than Zammad's, so they win whichever theme a
   person picks, without !important. The property names are Zammad 7.2.2's; after an upgrade,
   compare them with the release's (docs/runbooks/zammad-runbook.md, Upgrading).

   The values are the brand guide's (s-data/operations, docs/brand/brand-guidelines.md, sections
   6 to 8), as the link shortener's and the CRM's brands use them. */

@font-face { font-family: "Orbitron"; font-weight: 400 900; font-display: swap;
  src: url("/sdata-brand/fonts/orbitron-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "Quantico"; font-weight: 400; font-display: swap;
  src: url("/sdata-brand/fonts/quantico-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Quantico"; font-weight: 700; font-display: swap;
  src: url("/sdata-brand/fonts/quantico-700-latin.woff2") format("woff2"); }

html:root,
html:root[data-theme] {
  color-scheme: dark;

  /* Surfaces: Stealth Dark for the page, Chassis and the panel grays above it. */
  --background-primary: #0F1012;          /* Stealth Dark, the page */
  --background-primary-alt: #16181B;
  --background-secondary: #16181B;        /* panel */
  --background-secondary-hover: #1C1E21;
  --background-tertiary: #1C1E21;         /* Chassis, the navigation */
  --background-quaternary: #0F1012;
  --background-quaternary-alt: #2C2F34;
  --background-popover: #26292E;
  --background-highlight: rgb(255 215 0 / 0.12);
  --background-article-meta: #1C1E21;
  --background-article-customer: #26292E;
  --background-article-customer-meta: #2C2F34;
  --background-modifier-hover: rgb(255 215 0 / 0.06);

  /* Text. */
  --header-primary: #FFFFFF;
  --header-secondary: #A3A4A6;
  --text-normal: #EDEDED;
  --text-muted: #A3A4A6;                  /* secondary text */
  --text-muted-alt: #A3A4A6;
  --text-nav: #EDEDED;
  --text-link: #FFD700;                   /* Primary Gold */
  --text-inverted: #FFFFFF;               /* text on dark fills */
  --text-active: #0F1012;
  --interactive-primary: #FFFFFF;

  /* Gold for the actions and the highlight; dark text on every gold fill, because white on
     Primary Gold cannot be read. */
  --highlight: #FFD700;
  --background-active: #FFD700;
  --button-primary-background: #FFD700;
  --button-primary-background-active: #CCAC00;
  --button-primary-text: #0F1012;
  --button-background: #1C1E21;
  --button-background-active: #26292E;

  /* Lines. */
  --border: #2C2F34;                      /* quiet line */
  --border-alt: #2C2F34;
  --border-highlight: #FFD700;
  --shadow-highlight: rgb(255 215 0 / 0.35);
  --interactive-muted-alt: #4A4D53;       /* strong line */

  /* Warnings in Tactical Orange. */
  --bad-color: #E28714;
}

body {
  font-family: "Quantico", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, .page-header-title, .fullscreen-body .hero-unit h2 {
  font-family: "Orbitron", "Quantico", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
}

/* The sign-in panel sits on the page in the panel color, so the lockup's own dark ground does
   not show as a box. */
.hero-unit {
  background: #16181B;
  border: 1px solid #2C2F34;
}

::selection {
  background: rgb(255 215 0 / 0.35);
  color: #FFFFFF;
}

/* The navigation's logo, which is Zammad's bird drawn from its icon sheet rather than the
   product logo: the Sovereign Data letter mark in its place. The notification counter on it
   is left alone. */
.search .logo .icon-logo {
  visibility: hidden;
}
.search .logo {
  background: url("/sdata-brand/s-data-mark.svg") center / contain no-repeat;
}

/* The selected navigation item and the open task are filled gold, so their names and icons go
   dark. */
.menu-item.is-active,
.menu-item.is-active .menu-item-icon,
.nav-tab.is-active,
.nav-tab.is-active .icon {
  color: #0F1012;
  fill: #0F1012;
}