:root {
  --cw-accent: #F46B68;
  --cw-card: #F7F9FB;
  --cw-hover: #E7EBEE;
  --cw-indicator: #0D2A47;
  --cw-line: #D2D8DE;
  --cw-main: #0D2A47;
  --cw-main-hover: #203B55;
  --cw-muted: #4F6479;
  --cw-on-accent: #0D2A47;
  --cw-on-main: #F7F9FB;
  --cw-page: #EEF1F4;
  --cw-selected: #E0E4E9;
  --cw-text: #0D2A47;
}

:root.gl-dark {
  --cw-accent: #F46B68;
  --cw-card: #2B455E;
  --cw-hover: #395169;
  --cw-indicator: #F46B68;
  --cw-line: #4F6479;
  --cw-main: #0D2A47;
  --cw-main-hover: #203B55;
  --cw-muted: #B5BFC9;
  --cw-on-accent: #0D2A47;
  --cw-on-main: #F7F9FB;
  --cw-page: #1D3854;
  --cw-selected: #435A70;
  --cw-text: #F7F9FB;
}

:root,
:root.gl-dark {
  --gl-application-chrome-background-color: var(--cw-main) !important;
  --gl-background-color-default: var(--cw-card) !important;
  --gl-background-color-overlap: var(--cw-card) !important;
  --gl-background-color-section: var(--cw-card) !important;
  --gl-control-background-color-default: var(--cw-card) !important;
  --gl-button-default-primary-background-color-default: var(--cw-card) !important;
  --gl-background-color-subtle: var(--cw-hover) !important;
  --gl-background-color-strong: var(--cw-selected) !important;
  --gl-dropdown-option-background-color-selected-default: var(--cw-selected) !important;
  --gl-button-selected-background-color-default: var(--cw-selected) !important;
  --gl-filtered-search-token-type-background-color-default: var(--cw-selected) !important;
  --gl-border-color-default: var(--cw-line) !important;
  --gl-border-color-subtle: var(--cw-line) !important;
  --gl-border-color-section: var(--cw-line) !important;
  --gl-control-border-color-default: var(--cw-line) !important;
  --gl-text-color-default: var(--cw-text) !important;
  --gl-text-color-strong: var(--cw-text) !important;
  --gl-text-color-heading: var(--cw-text) !important;
  --gl-text-color-subtle: var(--cw-muted) !important;
  --gl-icon-color-default: var(--cw-text) !important;
  --gl-icon-color-subtle: var(--cw-muted) !important;
  --gl-text-color-link: var(--cw-text) !important;
  --gl-button-link-text-color-default: var(--cw-text) !important;
  --gl-button-link-text-color-hover: var(--cw-text) !important;
  --gl-button-confirm-primary-background-color-default: var(--cw-accent) !important;
  --gl-button-confirm-primary-background-color-hover: var(--cw-accent) !important;
  --gl-button-confirm-primary-background-color-focus: var(--cw-accent) !important;
  --gl-button-confirm-primary-background-color-active: var(--cw-accent) !important;
  --gl-button-confirm-primary-foreground-color-default: var(--cw-on-accent) !important;
  --gl-button-confirm-primary-foreground-color-hover: var(--cw-on-accent) !important;
  --gl-button-confirm-primary-foreground-color-focus: var(--cw-on-accent) !important;
  --gl-button-confirm-primary-foreground-color-active: var(--cw-on-accent) !important;
  --gl-action-strong-confirm-background-color-default: var(--cw-accent) !important;
  --gl-focus-ring-outer-color: var(--cw-indicator) !important;
  --gl-focus-ring-inner-color: var(--cw-card) !important;
  --gl-tab-selected-indicator-color-default: var(--cw-indicator) !important;
}

.super-sidebar {
  --gl-text-color-default: var(--cw-on-main) !important;
  --gl-text-color-strong: var(--cw-on-main) !important;
  --gl-text-color-heading: var(--cw-on-main) !important;
  --gl-text-color-subtle: var(--cw-on-main) !important;
  --gl-icon-color-default: var(--cw-on-main) !important;
  --gl-icon-color-subtle: var(--cw-on-main) !important;
  --gl-border-color-default: var(--cw-main-hover) !important;
  --super-sidebar-hr-border-color: var(--cw-main-hover) !important;
  --gl-nav-item-foreground-color-default: var(--cw-on-main) !important;
  --gl-nav-item-foreground-color-hover: var(--cw-on-main) !important;
  --gl-nav-item-foreground-color-focus: var(--cw-on-main) !important;
  --gl-nav-item-foreground-color-active: var(--cw-on-main) !important;
  --gl-nav-item-background-color-hover: var(--cw-main-hover) !important;
  --gl-nav-item-background-color-focus: var(--cw-main-hover) !important;
  --gl-nav-item-background-color-active: var(--cw-main-hover) !important;
  --gl-nav-item-selected-foreground-color-default: var(--cw-on-accent) !important;
  --gl-nav-item-selected-foreground-color-hover: var(--cw-on-accent) !important;
  --gl-nav-item-selected-foreground-color-focus: var(--cw-on-accent) !important;
  --gl-nav-item-selected-foreground-color-active: var(--cw-on-accent) !important;
  --gl-nav-item-selected-background-color-default: var(--cw-accent) !important;
  --gl-nav-item-selected-background-color-hover: var(--cw-accent) !important;
  --gl-nav-item-selected-background-color-focus: var(--cw-accent) !important;
  --gl-nav-item-selected-background-color-active: var(--cw-accent) !important;
}

.super-sidebar .gl-new-dropdown-panel {
  --gl-text-color-default: var(--cw-text) !important;
  --gl-text-color-strong: var(--cw-text) !important;
  --gl-text-color-heading: var(--cw-text) !important;
  --gl-text-color-subtle: var(--cw-muted) !important;
  --gl-icon-color-default: var(--cw-text) !important;
  --gl-icon-color-subtle: var(--cw-muted) !important;
  --gl-border-color-default: var(--cw-line) !important;
}

.super-topbar .btn-default-tertiary:not(.topbar-search-button),
.super-topbar .btn-default-tertiary:not(.topbar-search-button) > .gl-button-text {
  color: var(--cw-on-main) !important;
}

.super-topbar .topbar-search-button {
  background: var(--cw-main-hover) !important;
  border-color: var(--cw-main-hover) !important;
  color: var(--cw-on-main) !important;
}

.super-topbar .topbar-search-button * {
  color: var(--cw-on-main) !important;
}

.super-topbar .topbar-search-button kbd {
  background: var(--cw-main) !important;
  border-color: var(--cw-main) !important;
}

.tanuki-logo :is(.tanuki, .left-cheek, .right-cheek, .chin) {
  fill: var(--cw-accent) !important;
}

/* The fox above the sign-in form is an <img>, so GitLab's own logo is redrawn as the fox's outline in accent; uploaded logos are left alone. */
:root.html-devise-layout img.js-portrait-logo-detection[src*="/assets/logo-"] {
  object-position: -9999px 0;
  background: var(--cw-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 48'%3E%3Cpath d='m49.014 19-.067-.18-6.784-17.696a1.792 1.792 0 0 0-3.389.182l-4.579 14.02H15.651l-4.58-14.02a1.795 1.795 0 0 0-3.388-.182l-6.78 17.7-.071.175A12.595 12.595 0 0 0 5.01 33.556l.026.02.057.044 10.32 7.734 5.12 3.87 3.11 2.351a2.102 2.102 0 0 0 2.535 0l3.11-2.352 5.12-3.869 10.394-7.779.029-.022a12.595 12.595 0 0 0 4.182-14.554Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 48'%3E%3Cpath d='m49.014 19-.067-.18-6.784-17.696a1.792 1.792 0 0 0-3.389.182l-4.579 14.02H15.651l-4.58-14.02a1.795 1.795 0 0 0-3.388-.182l-6.78 17.7-.071.175A12.595 12.595 0 0 0 5.01 33.556l.026.02.057.044 10.32 7.734 5.12 3.87 3.11 2.351a2.102 2.102 0 0 0 2.535 0l3.11-2.352 5.12-3.869 10.394-7.779.029-.022a12.595 12.595 0 0 0 4.182-14.554Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root.html-devise-layout body {
  background-color: var(--cw-main) !important;
  color: var(--cw-on-main) !important;
}

:root.html-devise-layout body::before {
  background-image:
    radial-gradient(42% 60% at 22% 105%, color-mix(in srgb, var(--cw-accent) 34%, transparent), transparent 70%),
    radial-gradient(38% 55% at 82% -5%, color-mix(in srgb, var(--cw-accent) 18%, transparent), transparent 70%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}

.login-page .container:not(.footer-container .container) {
  background: var(--cw-card);
  color: var(--cw-text);
  border-top: 4px solid var(--cw-accent);
  border-radius: 12px;
  max-width: 480px !important;
  margin-top: 24px;
  padding: 32px 40px 28px !important;
}

.login-page h1,
.login-page label,
.login-page .custom-control-label,
.login-page .gl-link {
  color: var(--cw-text) !important;
}

.login-page input.form-control,
.login-page .gl-form-input {
  background: var(--cw-card) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-line) !important;
  box-shadow: inset 0 0 0 1px var(--cw-line) !important;
}

.login-page .btn-default,
.login-page .btn-default .gl-button-text {
  background: var(--cw-card) !important;
  color: var(--cw-text) !important;
}

.login-page .btn-default {
  box-shadow: inset 0 0 0 1px var(--cw-line) !important;
}

.footer-container,
.footer-container a,
.footer-container button,
.footer-container .gl-button-text {
  color: var(--cw-on-main) !important;
}