:root, [data-bs-theme="light"] {

/* bases */
  --brand-primary:   #bb0000; /* engineering orange */
  --brand-secondary: #d1ab3a; /* gold */
  --brand-tertiary:  #C0C0C0; /* silver */
  --brand-dark:      #212529; /* eerie black */

  --brand-primary-rgb:   187, 0,   0;
  --brand-secondary-rgb: 209, 171, 58;
  --brand-dark-rgb:      33,  37,  41;

  /*
    tints/tones:
    400, tint, base * white 12%
    500, base
    600, darken, base * black 12%
    700, darker, base * black 20%
  */

  /* Primary ladder */
  --brand-primary-400: color-mix(in oklch, var(--brand-primary), white 12%);
  --brand-primary-500: var(--brand-primary);
  --brand-primary-600: color-mix(in oklch, var(--brand-primary), black 12%);
  --brand-primary-700: color-mix(in oklch, var(--brand-primary), black 20%);
  --brand-primary-800: color-mix(in oklch, var(--brand-primary), black 30%);

  /* Secondary ladder */
  --brand-secondary-400: color-mix(in oklch, var(--brand-secondary), white 10%);
  --brand-secondary-500: var(--brand-secondary);
  --brand-secondary-600: color-mix(in oklch, var(--brand-secondary), black 12%);
  --brand-secondary-700: color-mix(in oklch, var(--brand-secondary), black 20%);
  --brand-secondary-800: color-mix(in oklch, var(--brand-secondary), black 30%);

  /* Tertiary ladder */
  --brand-tertiary-400: color-mix(in oklch, var(--brand-tertiary), white 8%);
  --brand-tertiary-500: var(--brand-tertiary);
  --brand-tertiary-600: color-mix(in oklch, var(--brand-tertiary), black 12%);
  --brand-tertiary-700: color-mix(in oklch, var(--brand-tertiary), black 20%);
  --brand-tertiary-800: color-mix(in oklch, var(--brand-tertiary), black 30%);
}


[data-bs-theme="dark"] {
  /* Bias lighter in dark for contrast */
  /*not sure if we need this yet*/
  /*--brand-primary-600:   color-mix(in oklch, var(--brand-primary),   white 26%);
  --brand-primary-700:   color-mix(in oklch, var(--brand-primary),   white 34%);
  --brand-secondary-600: color-mix(in oklch, var(--brand-secondary), white 24%);
  --brand-secondary-700: color-mix(in oklch, var(--brand-secondary), white 32%);
  --brand-tertiary-600:  color-mix(in oklch, var(--brand-tertiary),  white 22%);
  --brand-tertiary-700:  color-mix(in oklch, var(--brand-tertiary),  white 30%);*/
}