:root {
  /* --color-primary-lll: hsl(215, 52%, 96%); */
  /* --color-primary-ll: hsl(215, 52%, 91%); */
  /* --color-primary-l: hsl(215, 52%, 60%); */
  /* --color-primary: hsl(215, 52%, 38.8%); */
  /* --color-primary-d: hsl(215, 52%, 30%); */

  --color-primary-lll: hsl(220.4, 76.9%, 96%);
  --color-primary-ll: hsl(220.4, 76.9%, 91%);
  --color-primary-l: hsl(220.4, 76.9%, 60%);
  --color-primary: hsl(220.4, 76.9%, 28.8%);
  --color-primary-d: hsl(220.4, 76.9%, 22%);
  --color-primary-dd: hsl(220.4, 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-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: "Inter", -apple-system, "Segoe UI", Helvetica Neue, Helvetica,
    Roboto, Arial, sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji";
}

/* light */
:root,
:root[data-theme="light"] {
  --color-neutral-000: hsl(221, 58%, 97%);
  --color-neutral-100: hsl(219, 40%, 91%);
  --color-neutral-200: hsl(215, 41%, 82%);
  --color-neutral-300: hsl(216, 38%, 65%);
  --color-neutral-400: hsl(216, 35%, 53%);
  --color-neutral-500: hsl(216, 37%, 43%);
  --color-neutral-600: hsl(214, 39%, 37%);
  --color-neutral-700: hsl(214, 43%, 30%);
  --color-neutral-800: hsl(214, 45%, 16%);
  --color-neutral-900: hsl(215, 49%, 12%);

  --background: white;
  --background-secondary: var(--color-neutral-000);
  --color-foreground-text: var(--color-neutral-700);
  /* me = more emphasis */
  --color-foreground-text-me: var(--color-neutral-900);
  /* le = less emphasis */
  --color-foreground-text-le: var(--color-neutral-500);
  --color-foreground-separator: var(--color-neutral-000);
  /* me = more emphasis */
  --color-foreground-separator-me: var(--color-neutral-200);
  --color-foreground-accent: var(--color-neutral-000);
  --surface-color-background: white;
  --surface-color-background-secondary: var(--color-neutral-000);
  --surface-box-shadow: 0 1px 5px var(--color-primary-ll);
  --popover-background: white;
  --popover-hover-background: var(--color-neutral-000);
  --popover-box-shadow: var(--box-shadow-1);
  --button-neutral-background: var(--color-neutral-000);
  --button-neutral-border-color: var(--color-neutral-200);
  --button-neutral-focus-box-shadow-color: var(--color-neutral-100);
  --button-transparent-hover-background-color: var(--color-neutral-100);
  --button-transparent-focus-box-shadow-color: var(--color-neutral-100);
  --link-color: #0969da;
}

/* dark */
:root[data-theme="dark"] {
  --color-neutral-000: hsl(216, 23%, 95%);
  --color-neutral-100: hsl(214, 5%, 91%);
  --color-neutral-200: hsl(210, 6%, 78%);
  --color-neutral-300: hsl(211, 3%, 63%);
  --color-neutral-400: hsl(211, 1%, 53%);
  --color-neutral-500: hsl(211, 2%, 43%);
  --color-neutral-600: hsl(209, 4%, 37%);
  --color-neutral-700: hsl(209, 8%, 30%);
  --color-neutral-800: hsl(209, 10%, 14%);
  --color-neutral-900: hsl(210, 14%, 8%);

  --background: var(--color-neutral-900);
  --background-secondary: var(--color-neutral-800);
  --color-foreground-text: var(--color-neutral-200);
  /* me = more emphasis */
  --color-foreground-text-me: var(--color-neutral-000);
  /* le = less emphasis */
  --color-foreground-text-le: var(--color-neutral-400);
  --color-foreground-separator: var(--color-neutral-800);
  /* me = more emphasis */
  --color-foreground-separator-me: var(--color-neutral-700);
  --color-foreground-accent: var(--color-neutral-800);
  --surface-color-background: var(--color-neutral-900);
  --surface-color-background-secondary: var(--color-neutral-800);
  --surface-box-shadow: none;
  --popover-background: var(--color-neutral-900);
  --popover-hover-background: var(--color-neutral-800);
  --popover-box-shadow: var(--box-shadow-1);
  --button-neutral-background: var(--color-neutral-800);
  --button-neutral-border-color: var(--color-neutral-600);
  --button-neutral-focus-box-shadow-color: var(--color-neutral-700);
  --button-transparent-hover-background-color: var(--color-neutral-700);
  --button-transparent-focus-box-shadow-color: var(--color-neutral-700);
  --link-color: #58a6ff;
}

/* Same styles as :root[data-theme="dark"]. Make sure to keep in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-neutral-000: hsl(216, 23%, 95%);
    --color-neutral-100: hsl(214, 5%, 91%);
    --color-neutral-200: hsl(210, 6%, 78%);
    --color-neutral-300: hsl(211, 3%, 63%);
    --color-neutral-400: hsl(211, 1%, 53%);
    --color-neutral-500: hsl(211, 2%, 43%);
    --color-neutral-600: hsl(209, 4%, 37%);
    --color-neutral-700: hsl(209, 8%, 30%);
    --color-neutral-800: hsl(209, 10%, 14%);
    --color-neutral-900: hsl(210, 14%, 8%);

    --background: var(--color-neutral-900);
    --background-secondary: var(--color-neutral-800);
    --color-foreground-text: var(--color-neutral-200);
    /* me = more emphasis */
    --color-foreground-text-me: var(--color-neutral-000);
    /* le = less emphasis */
    --color-foreground-text-le: var(--color-neutral-400);
    --color-foreground-separator: var(--color-neutral-800);
    /* me = more emphasis */
    --color-foreground-separator-me: var(--color-neutral-700);
    --color-foreground-accent: var(--color-neutral-800);
    --surface-color-background: var(--color-neutral-900);
    --surface-color-background-secondary: var(--color-neutral-800);
    --surface-box-shadow: none;
    --popover-background: var(--color-neutral-900);
    --popover-hover-background: var(--color-neutral-800);
    --popover-box-shadow: var(--box-shadow-1);
    --button-neutral-background: var(--color-neutral-800);
    --button-neutral-border-color: var(--color-neutral-600);
    --button-neutral-focus-box-shadow-color: var(--color-neutral-700);
    --button-transparent-hover-background-color: var(--color-neutral-700);
    --button-transparent-focus-box-shadow-color: var(--color-neutral-700);
    --link-color: #58a6ff;
  }
}

body {
  background: var(--background);
  color: var(--color-foreground-text);
}

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

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