/*
 * Colour design tokens
 * Change only the four palette bases to re-theme the site.
 * Shades follow a consistent mixing recipe:
 *   dark    = 75% base + 25% black
 *   light   = 80% base + 20% white
 *   lighter = 25% base + 75% white
 * NOTE: generated shades will differ slightly from manually selected legacy shades.
 */


:root {
  /* Palette sources: edit these to change the site's core hues */
  --palette-primary: #0F4767;   /* formerly Lapis */
  --palette-secondary: #712425; /* formerly Volcano */
  --palette-accent: #0C6258;    /* formerly Algae */
  --palette-support: #131634;   /* formerly Space */

  /* Primary: blue */
  --color-primary: var(--palette-primary);
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 75%, black);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 80%, white);
  --color-primary-lighter: color-mix(in srgb, var(--color-primary) 25%, white);
  --color-primary-lighterer: color-mix(in srgb, var(--color-primary) 10%, white);

  /* Secondary: red */
  --color-secondary: var(--palette-secondary);
  --color-secondary-dark: color-mix(in srgb, var(--color-secondary) 75%, black);
  --color-secondary-light: color-mix(in srgb, var(--color-secondary) 80%, white);
  --color-secondary-lighter: color-mix(in srgb, var(--color-secondary) 25%, white);
  --color-secondary-lighterer: color-mix(in srgb, var(--color-secondary) 10%, white);

  /* Accent: green */
  --color-accent: var(--palette-accent);
  --color-accent-dark: color-mix(in srgb, var(--color-accent) 75%, black);
  --color-accent-light: color-mix(in srgb, var(--color-accent) 80%, white);
  --color-accent-lighter: color-mix(in srgb, var(--color-accent) 25%, white);
  --color-accent-lighterer: color-mix(in srgb, var(--color-accent) 10%, white);

  /* Supporting palette: deep navy */
  --color-support: var(--palette-support);
  --color-support-dark: color-mix(in srgb, var(--color-support) 75%, black);
  --color-support-light: color-mix(in srgb, var(--color-support) 80%, white);
  --color-support-lighter: color-mix(in srgb, var(--color-support) 25%, white);

  /* Functional, non-palette colours */
  --color-surface-secondary: #EFF4F6;
  --color-highlight: #90D5DF;
  --color-charcoal: #3C414D;
  --color-border-subtle: #DBE4E8;
  --color-canada: #C72127;
  --color-callToAction: #D33B36;
}