:root,
[data-theme='classical'] {
  --bkg: #ffffff;
  --primary-dark: hsl(210, 39%, 33%);
  --primary: hsl(210, 37%, 56%);
  --primary-light: hsl(210, 37%, 68%);
  --primary-lighter: hsl(210, 35%, 94%);
  --accent: hsl(33, 99%, 48%);
  --highlight: #00306f;
  --text: hsl(210, 18%, 20%);
  --text-light: hsl(210, 20%, 55%);
  --gray-100: hsl(210, 16%, 96%);
  --gray-300: hsl(210, 15%, 85%);
  --gray-500: hsl(210, 14%, 65%);
  --gray-700: hsl(210, 16%, 42%);
  --gray-900: hsl(210, 20%, 22%);
  --shadow-1: rgba(0, 0, 0, 0.1) 1px 2px 16px;
  --shadow-2:
    rgba(0, 0, 0, 0.035) 0.2px 0.5px 0.9px, rgba(0, 0, 0, 0.05) 0.6px 1.3px 2.5px,
    rgba(0, 0, 0, 0.067) 1.5px 3px 6px, rgba(0, 0, 0, 0.1) 5px 10px 20px;
  --shadow-3:
    rgba(0, 0, 0, 0.02) 0.2px 0.5px 1.7px, rgba(0, 0, 0, 0.03) 0.5px 1.1px 3.9px,
    rgba(0, 0, 0, 0.035) 1px 1.9px 7.1px, rgba(0, 0, 0, 0.043) 1.6px 3.2px 11.7px,
    rgba(0, 0, 0, 0.05) 2.6px 5.3px 19.3px, rgba(0, 0, 0, 0.06) 4.6px 9.2px 33.8px,
    rgba(0, 0, 0, 0.08) 10px 20px 73px;
  --elevation-1-surface: #ffffff;
  --elevation-1-shadow: var(--shadow-1);
  --elevation-1-border: none;
  --elevation-2-surface: #ffffff;
  --elevation-2-shadow: var(--shadow-2);
  --elevation-2-border: none;
  --elevation-3-surface: #ffffff;
  --elevation-3-shadow: var(--shadow-3);
  --elevation-3-border: none;
  --title-font: 'Source Sans 3', Helvetica, sans-serif;
  --main-font: 'Source Sans 3', Helvetica, sans-serif;
  --logo-filter: none;
  --header-shadow: var(--shadow-1);
}

[data-theme='quantum'] {
  --bkg: hsl(256, 30%, 8%);
  --primary-dark: hsl(256, 35%, 55%);
  --primary: hsl(256, 40%, 65%);
  --primary-light: hsl(256, 38%, 75%);
  --primary-lighter: hsl(256, 30%, 20%);
  --accent: hsl(33, 99%, 55%);
  --highlight: #00306f;
  --text: hsl(256, 25%, 88%);
  --text-light: hsl(256, 12%, 60%);
  --gray-100: hsl(256, 12%, 14%);
  --gray-300: hsl(256, 12%, 22%);
  --gray-500: hsl(256, 10%, 40%);
  --gray-700: hsl(256, 10%, 58%);
  --gray-900: hsl(256, 10%, 78%);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --elevation-1-surface: hsl(256, 18%, 12%);
  --elevation-1-shadow: none;
  --elevation-1-border: 1px solid hsl(256, 12%, 18%);
  --elevation-2-surface: hsl(256, 18%, 16%);
  --elevation-2-shadow: none;
  --elevation-2-border: 1px solid hsl(256, 12%, 22%);
  --elevation-3-surface: hsl(256, 18%, 22%);
  --elevation-3-shadow: none;
  --elevation-3-border: 1px solid hsl(256, 12%, 26%);
  --logo-filter: brightness(0) invert(1);
  --header-shadow: 0 2px 20px hsla(256, 40%, 65%, 0.25);
}