@layer dasy.tokens {
  :root {
    /* base colors */
    --dasy-ink:        var(--wp--preset--color--ink);
    --dasy-white:      var(--wp--preset--color--white);
    --dasy-blue:       var(--wp--preset--color--dasy-blue);
    --dasy-red:        var(--wp--preset--color--dasy-red);
    --dasy-green:      var(--wp--preset--color--dasy-green);
    --dasy-plum:       var(--wp--preset--color--plum);
    --dasy-purple:     var(--wp--preset--color--purple);
    --dasy-yellow:     var(--wp--preset--color--yellow);
    --dasy-gray:       var(--wp--preset--color--gray);
    --dasy-link:       var(--wp--preset--color--link);
	  --dasy-gray-ultralight: #d7d7d7;

    /* component-friendly aliases */
    --dasy-color-primary: var(--dasy-blue);
    --dasy-color-accent:  var(--dasy-red);
    --dasy-color-border:  var(--dasy-gray-ultralight);

    --dasy-editor-border-color: hsl(350, 50%, 88%);
    --dasy-radius-sm: .33rem;
    --dasy-radius-md: .5rem;
    --dasy-pad-x: 1.5rem;
    --dasy-pad-y: 1rem;
    --dasy-focus: #29e1cb;
  }
}