@import url("/src/styles/fonts.css");

:root {
  --c-g-90: light-dark(hsl(210, 6%, 7%), hsl(225, 40%, 98%));
  --c-g-85: light-dark(hsl(220, 5%, 9%), hsl(225, 40%, 97%));
  --c-g-80: light-dark(hsl(220, 5%, 12%), hsl(225, 40%, 96%));
  --c-g-75: light-dark(hsl(218, 8%, 16%), hsl(225, 40%, 93%));
  --c-g-70: light-dark(hsl(218, 8%, 20%), hsl(220, 29%, 90%));
  --c-g-65: light-dark(hsl(221, 8%, 30%), hsl(220, 29%, 85%));
  --c-g-60: light-dark(hsl(221, 8%, 40%), hsl(219, 20%, 80%));
  --c-g-55: light-dark(hsl(219, 10%, 50%), hsl(219, 20%, 70%));
  --c-g-50: light-dark(hsl(219, 10%, 60%), hsl(219, 10%, 60%));
  --c-g-45: light-dark(hsl(219, 20%, 70%), hsl(219, 10%, 50%));
  --c-g-40: light-dark(hsl(219, 20%, 80%), hsl(221, 8%, 40%));
  --c-g-35: light-dark(hsl(220, 29%, 85%), hsl(221, 8%, 30%));
  --c-g-30: light-dark(hsl(220, 29%, 90%), hsl(218, 8%, 20%));
  --c-g-25: light-dark(hsl(225, 40%, 93%), hsl(218, 8%, 16%));
  --c-g-20: light-dark(hsl(225, 40%, 96%), hsl(220, 5%, 12%));
  --c-g-15: light-dark(hsl(225, 40%, 97%), hsl(220, 5%, 9%));
  --c-g-10: light-dark(hsl(225, 40%, 98%), hsl(210, 6%, 7%));

  --border-light: 1px solid
    light-dark(hsla(0, 0%, 20%, 0.3), hsla(0, 0%, 100%, 0.2));

  --border-light-b: 1px solid
    light-dark(hsla(0, 0%, 20%, 0.6), hsla(0, 0%, 100%, 0.3));

  --c-purple: light-dark(hsl(270, 80%, 40%), hsl(270, 80%, 20%));
  --c-blue: light-dark(hsl(220, 100%, 40%), hsl(210, 100%, 55%));

  --c-background: light-dark(var(--c-g-35), black);
  --c-page: light-dark(var(--c-g-30), #181818);
  --c-text: light-dark(hsl(0, 0%, 6%), var(--c-g-60));
}