/* Cedar Health: 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(158, 80%, 27%);
  --brand-primary-2: hsl(158, 82%, 23%);
  --brand-primary-3: hsl(158, 85%, 19%);
  --brand-primary-light-1: #f5feff;
  --brand-primary-light-2: #e6fcff;
  --brand-primary-light-3: #d6f8ff;
  --brand-primary-dark-1: hsl(158, 85%, 20%);
  --brand-primary-dark-2: hsl(158, 90%, 16%);
  --brand-primary-dark-3: hsl(158, 95%, 13%);
  /* 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(158, 55%, 50%);
  --brand-dark-primary-2: hsl(158, 60%, 58%);
  --brand-dark-primary-3: hsl(158, 65%, 66%);
  --brand-dark-on-primary: hsl(235, 12%, 8%);
  /* Fields and buttons: the corner radius they share. */
  --control-radius: 12px;
}