/* https://www.materialpalette.com/blue-grey/amber */

:root {
  --theme-accent: hsl(45, 100%, 50%);
    --theme-accent-hs: 45, 100%;
    --theme-accent-l: 51%;

  --theme-brand-primary: hsl(200, 18%, 46%); /* primary */
    --theme-brand-primary-hs: 200, 18%;
    --theme-brand-primary-h: 200;
    --theme-brand-primary-s: 18%;
    --theme-brand-primary-l: 46%;

  --theme-divider: hsl(0, 0%, 74%);
  --theme-divider-bg: hsl(0, 0%, 94%);

  --theme-brand-primary-dark: #455A64;
  --theme-brand-primary-light: #CFD8DC;
  --theme-primary: #FFC107;
  --theme-secondary: #757575;
  --theme-dark: #212121;
  --theme-light: #FFFFFF;

  --btn-shadow: 0px 1px 2px hsl(var(--theme-brand-primary-hs), calc(var(--theme-brand-primary-l) + 20%));
}