/* @import "./palette-steps.css";
@import "./grey.css"; */

:where(html) {

  /* Greyscale */
  --transparent: transparent;

  /* TODO: remove middle of the road greys */
  --white: #ffffff;

  --black: #14141B; 
  
  /* Light */
  --light: var(--grey-3);
  --light-contrast: var(--black);
  --light-shade: oklch(from var(--color-light) calc(l - var(--_l-shade-tint)) c calc(h - var(--_h-shade-tint)) );
  --light-tint: oklch(from var(--color-light) calc(l + var(--_l-shade-tint)) c calc(h + var(--_h-shade-tint)) );
  
  /* Medium */
  --medium: var(--grey-5);
  --medium-contrast: var(--black);
  --medium-shade:  oklch(from var(--color-medium) calc(l - var(--_l-shade-tint)) c calc(h - var(--_h-shade-tint)) );
  --medium-tint: oklch(from var(--color-medium) calc(l + var(--_l-shade-tint)) c calc(h + var(--_h-shade-tint)) );
  
  /* Dark */
  --dark: var(--grey-7);
  --dark-contrast: var(--white);
  --dark-shade: oklch(from var(--color-dark) calc(l - var(--_l-shade-tint)) c calc(h - var(--_h-shade-tint)) );
  --dark-tint: oklch(from var(--color-dark) calc(l + var(--_l-shade-tint)) c calc(h + var(--_h-shade-tint)) );
}