/*
 * Data Controller brand overrides for the Material theme.
 *
 * The values below mirror the marketing site (https://datacontroller.io): the
 * slate used for its navbar and hero, and the green used for its logo accent.
 * They are wired up through the `custom` palette in mkdocs.yml, which leaves
 * these CSS variables for us to define.
 */

/* Primary - the brand slate, used for the header, the mobile drawer title and body links. */
:root,
[data-md-color-primary='custom'] {
  --md-primary-fg-color: #314351;
  --md-primary-fg-color--light: #3d5468;
  --md-primary-fg-color--dark: #263542;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-typeset-a-color: #314351;
}

/* Accent - the brand green, used for link hover, focus rings and the active search hit. */
[data-md-color-accent='custom'] {
  --md-accent-fg-color: #79a843;
  --md-accent-fg-color--transparent: #79a8431a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;
}

/*
 * Dark scheme. Material derives its dark greys from a hue variable, so pointing
 * that at the brand slate (206deg) gives the whole scheme the same cast as the
 * header instead of Material's neutral default.
 */
[data-md-color-scheme='slate'] {
  --md-hue: 206deg;
}

/*
 * The brand slate is only readable on a light background, so the dark scheme
 * uses a light tint of it for body links. Green stays the accent, which keeps
 * link hover visible in both schemes.
 */
[data-md-color-scheme='slate'][data-md-color-primary='custom'] {
  --md-typeset-a-color: #9fb5c6;
}