*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
    color-scheme: light;
    --background: #faf9f6;
    --background-alt: #ccc;
    --background-inner: #ddd;
    --background-today: #8fdf82;
    --border-outer: #000;
    --border-inner: #fff;
    --button-hover: #64707b;
    --button-select: #1a252f;
    --text-normal: #000;
    --text-opp: #fff;
    --text-faded: #aaa;
    --text-linked: #4a1424;
    --text-black: #000;
    --text-white: #fff;
    --rip-red: #fb4934;
    --rip-orange: #fe8019;
    --rip-yellow: #fabd2f;
    --rip-green: #b8bb26;
    --rip-blue: #83a598;
    --rip-purple: #d3869b;
}

.badge-shadow-b, .badge-shadow {
  --border-outer-alpha: rgba(0, 0, 0, 0.1);
}

.selected-preference {
  --border-outer-alpha: rgba(0, 0, 0, 0.2);
}

.badge-shadow-b, .badge-shadow, .selected-preference{
  filter: 
    drop-shadow(1px 0px 0 var(--border-outer-alpha))
    drop-shadow(-1px 0px 0 var(--border-outer-alpha))
    drop-shadow(0px 1px 0 var(--border-outer-alpha))
    drop-shadow(0px -1px 0 var(--border-outer-alpha))
    drop-shadow(1px -1px 0 var(--border-outer-alpha))
    drop-shadow(-1px -1px 0 var(--border-outer-alpha))
    drop-shadow(1px 1px 0 var(--border-outer-alpha))
    drop-shadow(1px -1px 0 var(--border-outer-alpha));
}

.invert-light {
  filter: invert(1);
}