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

:where(html) {
  /* Yellow */
  --yellow: #FAB005;
  --yellow-1: oklch(from var(--yellow) calc(l + var(--_l-1)) c calc(h + var(--_h-1))); 
  --yellow-2: oklch(from var(--yellow) calc(l + var(--_l-2)) c calc(h + var(--_h-2))); 
  --yellow-3: oklch(from var(--yellow) calc(l + var(--_l-3)) c calc(h + var(--_h-3))); 
  --yellow-4: oklch(from var(--yellow) calc(l + var(--_l-4)) c calc(h + var(--_h-4))); 
  --yellow-5: var(--yellow); 
  --yellow-6: oklch(from var(--yellow) calc(l - var(--_l-6)) c calc(h - var(--_h-6))); 
  --yellow-7: oklch(from var(--yellow) calc(l - var(--_l-7)) c calc(h - var(--_h-7))); 
  --yellow-8: oklch(from var(--yellow) calc(l - var(--_l-8)) c calc(h - var(--_h-8)));   
  --yellow-9: oklch(from var(--yellow) calc(l - var(--_l-9)) c calc(h - var(--_h-9))); 
  --yellow-contrast: color-contrast(var(--yellow) vs var(--white), var(--black));
  --yellow-shade: var(--yellow-7);
  --yellow-tint: var(--yellow-3);
  /* --yellow-3: #FFD366;
  --yellow-5: #FFB600;
  --yellow-7: #BF8800;
  --yellow: var(--yellow-5); */
}