/* Orlop AI Tech skin for Zammad, injected at runtime by nginx. Copyright © Fabian Stamminger @ The Platform Group */
html:root {
  --orlop-dark: #0e1115;
  --orlop-silver: #b6bccc;
  --orlop-surface: #333840;
  --orlop-primary: #6b717c;
  --orlop-white: #fff;

  --color-black: var(--orlop-dark);
  --color-white: var(--orlop-white);
  --color-neutral-50: var(--orlop-white);
  --color-neutral-75: #f5f6f8;
  --color-neutral-100: #e2e5e8;
  --color-neutral-200: #d3d7db;
  --color-neutral-300: #c4c9ce;
  --color-neutral-400: var(--orlop-silver);
  --color-neutral-500: #8f969f;
  --color-neutral-700: #6b717c;
  --color-neutral-800: #4f555e;
  --color-neutral-950: var(--orlop-dark);

  --color-gray-100: #7d848e;
  --color-gray-200: #6b717c;
  --color-gray-300: #565d66;
  --color-gray-400: #454b54;
  --color-gray-500: var(--orlop-surface);
  --color-gray-600: #292e35;
  --color-gray-700: #20252b;
  --color-gray-800: #171b20;
  --color-gray-900: var(--orlop-dark);

  --color-blue-50: #f5f6f8;
  --color-blue-100: #e7e9ec;
  --color-blue-300: #d0d4d9;
  --color-blue-500: var(--orlop-silver);
  --color-blue-700: #838a94;
  --color-blue-800: var(--orlop-primary);
  --color-blue-900: #4f555e;
  --color-blue-950: var(--orlop-dark);
}

html,
body,
button,
input,
select,
textarea {
  font-family: Satoshi, Aptos, "Segoe UI", sans-serif;
}

/* Classic UI (agent desktop, login, setup wizard). Zammad defines these on :root and
   [data-theme=dark]; html:root / html[data-theme=dark] win on specificity. */
html:root {
  --button-primary-background: #0e1115;
  --button-primary-background-active: #333840;
  --button-primary-text: #fff;
  --header-primary: #0e1115;
  --header-secondary: #6b717c;
  --text-link: #333840;
  --text-nav: #333840;
  --highlight: #6b717c;
  --interactive-primary: #0e1115;
  --background-primary: #f5f6f8;
  --background-primary-alt: #eef0f3;
  --background-secondary: #fff;
  --background-secondary-hover: #f5f6f8;
  --background-tertiary: #171b20;
  --background-quaternary: #0e1115;
  --background-quaternary-alt: #e7e9ec;
  --background-active: #0e1115;
  --background-highlight: #e7e9ec;
  --backdrop-clue-start: rgba(107, 113, 124, 0.1);
  --backdrop-clue-end: rgba(14, 17, 21, 0.9);
  --border: #d8dce4;
  --border-alt: #d8dce4;
  --border-highlight: #b6bccc;
  --tag-background: #e7e9ec;
  --tag-text: #6b717c;
  --menu-background-active: #333840;
  --fullscreen-background: #f5f6f8;
  --fullscreen-text: #6b717c;
  --fullscreen-text-link: #0e1115;
  --fullscreen-drop-shadow: 0 10px 30px rgba(14, 17, 21, 0.08);
}

html[data-theme=dark] {
  --button-primary-background: #b6bccc;
  --button-primary-background-active: #d8dce4;
  --button-primary-text: #0e1115;
  --text-link: #b6bccc;
  --highlight: #b6bccc;
  --border-highlight: #b6bccc;
  --background-primary: #14181d;
  --background-primary-alt: #181c22;
  --background-secondary: #1c2026;
  --background-secondary-hover: #171b20;
  --background-tertiary: #101317;
  --background-quaternary: #0b0d10;
  --background-quaternary-alt: #333840;
  --background-popover: #333840;
  --background-highlight: #333840;
  --background-article-meta: #232830;
  --menu-background-active: #333840;
  --fullscreen-background: #0e1115;
  --fullscreen-text: #b6bccc;
  --fullscreen-text-link: #f5f6f8;
}

.btn--primary {
  border-radius: 9999px;
  font-weight: 700;
}

.btn--positive,
.btn--create,
.btn--success {
  background: var(--button-primary-background);
  color: var(--button-primary-text);
  border-radius: 9999px;
  font-weight: 700;
}

.btn--positive:active,
.btn--create:active,
.btn--success:active {
  background: var(--button-primary-background-active);
}

.btn--positive.btn--secondary,
.btn--create.btn--secondary,
.btn--success.btn--secondary {
  background: var(--background-secondary);
  color: var(--interactive-primary);
}

.btn--success .icon-arrow-down,
.btn--success .icon-arrow-up,
.btn--success .icon-arrow-left,
.btn--success .icon-arrow-right {
  fill: currentColor;
}

/* Replace the Zammad bird with the Orlop marks. */
svg.icon-full-logo use,
svg.icon-logo use {
  display: none;
}

svg.icon-full-logo {
  width: 206px;
  height: 60px;
  background: url("/orlop/orlop-ai-tech-logo.png") center / contain no-repeat;
}

html[data-theme=dark] svg.icon-full-logo {
  background-image: url("/orlop/orlop-ai-tech-logo-light.svg");
}

svg.icon-logo {
  background: url("/orlop/orlop-ai-tech-icon.png") center / contain no-repeat;
}

.hero-unit,
.wizard-slide {
  border-radius: 16px;
}

/* No "Powered by" vendor footer on login, signup and password pages. */
.poweredBy {
  display: none !important;
}
/* Orlop account (OIDC) button: accent pill like the secondary buttons on orlop-tech.com. */
.auth-provider.auth-provider--openid-connect {
  background: var(--orlop-silver);
  color: var(--orlop-dark);
  border-radius: 9999px;
  font-weight: 700;
}
.auth-provider.auth-provider--openid-connect:hover {
  background: #d8dce4;
}
.auth-provider.auth-provider--openid-connect .provider-icon {
  fill: var(--orlop-dark);
}
button.auth-provider.auth-provider--openid-connect,
button.auth-provider.auth-provider--openid-connect .provider-name {
  color: var(--orlop-dark) !important;
}
/* Uploaded product logo has a dark wordmark: swap to the light-stroke mark in the dark theme. */
html[data-theme=dark] img.company-logo {
  content: url("/orlop/orlop-ai-tech-logo-light.svg");
}