:root {
  --color-primary-lll: hsl(265.3, 76.9%, 96%);
  --color-primary-ll: hsl(265.3, 76.9%, 91%);
  --color-primary-l: hsl(265.3, 76.9%, 60%);
  --color-primary: hsl(265.3, 76.9%, 40%);
  --color-primary-d: hsl(265.3, 76.9%, 22%);
  --color-primary-dd: hsl(265.3, 76.9%, 13%);

  /* --color-secondary: rgb(220, 0, 234); */
  --color-secondary: hsl(343.6, 78%, 49.8%);
  --color-secondary-lll: hsl(343.6, 78%, 94%);

  --color-tertiary: hsl(183.7, 58.2%, 51.2%);
  --color-tertiary-lll: hsl(183.7, 58.2%, 92%);

  --color-neutral-000: hsl(152, 8%, 97%);
  --color-neutral-100: hsl(152, 6%, 91%);
  --color-neutral-200: hsl(152, 6%, 82%);
  --color-neutral-300: hsl(152, 6%, 65%);
  --color-neutral-400: hsl(152, 5%, 53%);
  --color-neutral-500: hsl(152, 6%, 43%);
  --color-neutral-600: hsl(152, 6%, 37%);
  --color-neutral-700: hsl(152, 6%, 30%);
  --color-neutral-800: hsl(152, 6%, 16%);
  --color-neutral-900: hsl(152, 8%, 12%);

  --color-success-000: hsl(125, 65%, 93%);
  --color-success-100: hsl(127, 65%, 85%);
  --color-success-200: hsl(124, 63%, 74%);
  --color-success-300: hsl(123, 53%, 55%);
  --color-success-400: hsl(123, 57%, 45%);
  --color-success-500: hsl(122, 73%, 35%);
  --color-success-600: hsl(122, 80%, 29%);
  --color-success-700: hsl(125, 79%, 26%);
  --color-success-800: hsl(125, 86%, 20%);
  --color-success-900: hsl(125, 97%, 14%);

  --color-danger-000: hsl(0, 100%, 95%);
  --color-danger-100: hsl(0, 100%, 87%);
  --color-danger-200: hsl(0, 100%, 80%);
  --color-danger-300: hsl(0, 91%, 69%);
  --color-danger-400: hsl(0, 83%, 62%);
  --color-danger-500: hsl(356, 75%, 53%);
  --color-danger-600: hsl(354, 85%, 44%);
  --color-danger-700: hsl(352, 90%, 35%);
  --color-danger-800: hsl(350, 94%, 28%);
  --color-danger-900: hsl(348, 94%, 20%);

  --color-info-000: hsl(45, 100%, 96%);
  --color-info-100: hsl(45, 90%, 88%);
  --color-info-200: hsl(45, 86%, 81%);
  --color-info-300: hsl(43, 90%, 76%);
  --color-info-400: hsl(43, 89%, 70%);
  --color-info-500: hsl(42, 78%, 60%);
  --color-info-600: hsl(42, 63%, 48%);
  --color-info-700: hsl(43, 72%, 37%);
  --color-info-800: hsl(43, 77%, 27%);
  --color-info-900: hsl(43, 86%, 17%);

  /* type scale */
  --fs0: 13px;
  --fs1: 14px;
  --fs2: 15px;
  --fs3: 16px;
  --fs4: 17px;
  --fs5: 18px;
  --fs6: 22px;
  --fs7: 28px;
  --fs8: 34px;
  --fs9: 48px;
  --fsA: 60px;
  --fsB: 72px;

  /* spacing */
  --sp0: 2px;
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 24px;
  --sp6: 32px;
  --sp7: 48px;
  --sp8: 64px;
  --sp9: 96px;
  --spA: 128px;
  --spB: 256px;
  --spC: 384px;
  --spD: 512px;
  --spE: 640px;
  --spF: 768px;

  /* border-radius */
  --br0: 1px;
  --br1: 2px;
  --br2: 4px;
  --br3: 8px;
  --br4: 12px;
  --br5: 16px;
  --br6: 20px;
  --br7: 28px;

  --box-shadow-0: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  /* stub comment so this lines up with dark.css */
  --box-shadow-1: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  /* stub comment so this lines up with dark.css */
  --box-shadow-2: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  /* stub comment so this lines up with dark.css */
  --box-shadow-3: 0 15px 25px rgba(0, 0, 0, 0.15),
    0 5px 10px rgba(0, 0, 0, 0.05);
  --box-shadow-4: 0 20px 40px rgba(0, 0, 0, 0.2);

  --font-family-0: "Roboto", -apple-system, "Segoe UI", Helvetica Neue,
    Helvetica, Arial, sans-serif, system-ui, "Apple Color Emoji",
    "Segoe UI Emoji";
}

body {
  accent-color: var(--color-primary);
}

/* TODO */
/* :-moz-focusring {
  outline: auto;
}

:focus {
  outline: var(--color-links) solid 2px;
  outline-offset: 2px;
} */