/* Hireline: 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(240, 46%, 48%);
  --brand-primary-2: hsl(240, 51%, 43%);
  --brand-primary-3: hsl(240, 56%, 38%);
  --brand-primary-light-1: hsl(230, 100%, 89%);
  --brand-primary-light-2: hsl(233, 100%, 86%);
  --brand-primary-light-3: hsl(236, 100%, 83%);
  --brand-primary-dark-1: hsl(240, 81%, 31%);
  --brand-primary-dark-2: hsl(240, 86%, 26%);
  --brand-primary-dark-3: hsl(240, 91%, 21%);
  /* Dark themes: the indigo above vanishes as text on a dark card, so it
     lifts, and button text on it turns dark to stay readable. */
  --brand-dark-primary-1: hsl(240, 70%, 76%);
  --brand-dark-primary-2: hsl(240, 75%, 82%);
  --brand-dark-primary-3: hsl(240, 80%, 87%);
  --brand-dark-on-primary: hsl(235, 12%, 8%);
  /* Fields and buttons: the corner radius they share. */
  --control-radius: 8px;
}