/* StagePass: 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(22, 85%, 39%);
  --brand-primary-2: hsl(22, 87%, 34%);
  --brand-primary-3: hsl(22, 90%, 29%);
  --brand-primary-light-1: hsl(45, 100%, 89%);
  --brand-primary-light-2: hsl(48, 100%, 86%);
  --brand-primary-light-3: hsl(51, 100%, 83%);
  --brand-primary-dark-1: hsl(24, 75%, 32%);
  --brand-primary-dark-2: hsl(24, 80%, 27%);
  --brand-primary-dark-3: hsl(24, 85%, 22%);
  /* Dark themes: lighter and calmer, so the brand reads as text on a dark
     card; button text on it is dark. */
  --brand-dark-primary-1: hsl(22, 60%, 56%);
  --brand-dark-primary-2: hsl(22, 65%, 64%);
  --brand-dark-primary-3: hsl(22, 70%, 72%);
  --brand-dark-on-primary: hsl(235, 12%, 8%);
  /* Fields and buttons: the corner radius they share. */
  --control-radius: 999px;
}