/* /css/tokens.css  — base tokens (light) */
:root{
  /* brand + links (from your current CSS) */
  --brand-blue:  #1a84ba;       /* links */ 
  --brand-green: #47824C;       /* headings */
  --rose:        #B3595C;       /* pricing 'default' header */
  --std-blue:    #4282A7;       /* Standard header */
  --cf-green:    #42A782;       /* Carefree header */

  /* neutrals (light) */
  --bg:          #ecf5ef;       /* body background */
  --surface:     #ffffff;       
  --surface-2:   #f1f7f5;       
  --border:      #ddd;
  --text:        #000;
  --muted:       #444;
  --link:        var(--brand-blue);
  --link-hover:  var(--brand-blue);

  /* component tints matching your boxes */
  --tint-1:      #DAE4DE;       /* infobox */
  --tint-2:      #DCE9E2;       /* blockquote etc. */
  --tint-3:      rgba(205,217,210,.5); /* feature/extras */  
}

/* Dark palette gets set by the selected scheme (see section C) */