app/assets/stylesheets/custom/tenants.scss
// If you're using multitenancy, you can override styles for a certain
// tenant by styling the `<html>` element with the class
// `tenant-<tenant_name>`. For example, to style the public (main)
// tenant without these styles affecting any other tenants, use the
// `.tenant-public` selector.
//
// You can use CSS variables to customize the colors. Here's an example
// changing the brand, buttons, links and main layout colors for just
// the main tenant.
//
// .tenant-public {
// --anchor-color: #372;
// --anchor-color-hover: #137;
// --brand: #153;
// --brand-secondary: #134a00;
// --button-background-hover: #fa0;
// --button-background-hover-contrast: #{$black};
// --footer: #e6e6e6;
// --main-header: #351;
// --top-links: var(--main-header);
// --subnavigation: #ffd;
// }
//
// Some colors default to another color, so you don't have to change
// both colors if you'd like them to be the same. For instance, the
// `--main-header` and `--anchor-color` colors will use the `--brand`
// color if `--main-header` or `--anchor-color` are not defined, while
// the `--top-links` color will use the `--brand-secondary` color if
// `--top-links` is not defined.
//
// If, for instance, you're using a light color for the main header when
// the default color is a dark one, you should also change the text
// color. You can do that with a variable ending in `-contrast`, like:
//
// .tenant-public {
// --main-header: #{$white};
// --main-header-contrast: #{$black};
// }
//
// NOTE: If you are **not** using mulitenancy, we recommend overwriting
// SCSS variables in the `_consul_custom_overrides.scss` file instead