$surface-1: hsl(240, 3%, 4%);
$surface-2: hsl(240, 3%, 8%);
$surface-3: hsl(240, 3%, 12%);
$surface-4: hsl(240, 3%, 16%);
$surface-5: hsl(240, 3%, 20%);

$accent-1: hsl(0,60%,60%);
$accent-2: hsl(25,60%,60%);
$accent-3: hsl(55,60%,60%);
$accent-4: hsl(145,60%,60%);
$accent-5: hsl(185,60%,60%);
$accent-6: hsl(240,60%,60%);
$accent-7: hsl(265,60%,60%);
$accent-8: hsl(300,60%,60%);

$primary-accent: $accent-7;
$secondary-accent: $accent-4;

$foreground-color: lighten($surface-5, 45%);

$highlight: rgba(255,255,255,0.15);

// TODO: is there a better way to do this? this is for example used in gnome-calculator for the result top-border
@define-color borders #{"" +$surface-2};