/* The Harbour Courier: its brand colours and the shape of its fields and
   buttons. The kit and every theme read these variables, so link this file
   anywhere after the kit's stylesheet. --brand-* are the light values,
   --brand-dark-* the dark themes'. */
:root {
  --brand-primary-1: hsl(220, 22%, 30%);
  --brand-primary-2: hsl(220, 25%, 25%);
  --brand-primary-3: hsl(220, 28%, 20%);
  --brand-primary-light-1: hsl(220, 25%, 96%);
  --brand-primary-light-2: hsl(220, 22%, 92%);
  --brand-primary-light-3: hsl(220, 20%, 86%);
  --brand-primary-dark-1: hsl(220, 30%, 20%);
  --brand-primary-dark-2: hsl(220, 35%, 16%);
  --brand-primary-dark-3: hsl(220, 40%, 12%);
  /* Dark themes: the slate ink lifts so it reads as text on a dark card,
     and button text on it turns dark. */
  --brand-dark-primary-1: hsl(220, 25%, 72%);
  --brand-dark-primary-2: hsl(220, 28%, 79%);
  --brand-dark-primary-3: hsl(220, 30%, 86%);
  --brand-dark-on-primary: hsl(220, 25%, 8%);
  /* Fields and buttons: the corner radius they share. */
  --control-radius: 2px;
}